Mobile-Adaptive REM settings

The commonly known CSS style size units are px,em.

PX: Accurately describe the size of the element, and does not vary with the size of the screen;

EM: Relative to the size of the parent element, it can cause this value to be very large or very small if nested in layers.

When writing a mobile page, in order to make the page adaptable to the size of a mobile device in a variety of sizes, REM is often used to represent the size of each element.

Rem:font size of the root element, which is relative to the root font.

Therefore, before you develop the page, you need to specify a value for the font of the root element.

In general, the browser default root element font size is 16px, so for convenience of calculation, you can set the root element font size to

html{     font-size:62.5%;      /* 16 * 62.5% = 10; root element font size is 10px */
/* */
}
h1{
The size of the FONT-SIZE:1.2REM;/*H1 font is 12px*/
}

Then, by using media queries to set the percentage of font-size for different screen sizes, you can implement a front-end page fit.

Another way is to set the size of the root element font-size to a certain ratio of the screen width, so that when opened by different screens, the value of 1rem will naturally not be the same.

document.getElementsByTagName (' HTML ') [0].style.fontsize = Window.screen.width/10 + ' px ';

If the size of the IPhone5, then the root element font size is 32px;

If the size of the IPhone6, then the root element font size is 37.5px;

But it's hard to convert when we set the size of each element. It doesn't matter, the CSS compiler tool can solve this problem. Take less as an example:

Set a function, assuming that the design is the size of the iphone, the font size of p on the design chart is 12px, then the font size of p on different screens is (12/37.5) Rem.

. FS (@px) {    font-size:unit (@px/37.5,rem);  /*37.5 is the size of the design diagram corresponding to the screen width divided by 10*/}
p{
  . FS (12);
}

Other widths and heights are also written in the form of functions.

Because some low-version browsers do not support CSS3 or the default font is not 16px, REM is not used on the PC side.

Mobile-Adaptive REM settings