It is believed that the first web page size that many people touch is px, which represents the size of a pixel
The designer's design draft we received is also based on px
But the screen size of the mobile phone is different. The display effect on the iPhone 8 is very good. It may be completely out of shape on the iPhone 5S. In order to have a good display effect on the screens of different sizes, we need to zoom the web page
Rem is a very interesting unit. The size of 1rem is equal to the size of font size of html, that is, if
html{ font-size: 100px; }
So, 1 rem is 100 px
We can dynamically change the size of font size under html through the width of the screen, so as to realize the zooming of the web page
calc is a function of css3, which can realize simple addition, subtraction, multiplication and division (it can be used to replace some functions of sass)
The combination of rem and calc can be realized with very simple code and the adaptation of various screens
The effect is as shown in the figure
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>How to use rem</title> <script> // Get device pixel ratio (DPR - > devicepixel ratio) var dpr = window.devicePixelRatio; // Dynamically set device zoom ratio var metaTag=document.createElement('meta'); metaTag.name = "viewport" metaTag.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no'); document.getElementsByTagName('head')[0].appendChild(metaTag); </script> <script> // Dynamically set the font size of html (page width is 1rem) document.addEventListener('DOMContentLoaded', function(e) { document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth + 'px'; }, false); </script> </head> <body> <style> body{ text-align: center; margin: 0; padding: 0; line-height: 0; } table{ width: 100%; } .icon{ width: calc(196rem / 375); margin: calc(100rem / 375) 0 0 0; } .name{ margin: calc(30rem / 375) 0 0 0; font-size: calc(30rem / 375); line-height: calc(30rem / 375); color: #64B587; } </style> <table> <tbody> <tr><td><img src="girl.png" class="icon"></img></td></tr> <tr><td><p class="name">Yara Barros</p></td></tr> </tbody> </table> </body> </html>
Summary:
rem is a dynamically defined unit. In combination with the calc function of css3, we can write a set of code and easily adapt to various sizes of screens. In addition, when writing the calc function, we must leave spaces before and after the operators~