Understand the real 『REM』 mobile screen adaptation

As a low-key unit of length, rem has been reused in screen adaptation due to the rise of mobile web pages. Using rem, front-end developers can easily achieve the required effect of the design drawing by proportional scaling on various screen sizes.

The official definition of rem is "The font size of the root element.", which means that the font size of the root node is used as the reference value for length calculation. It is generally believed that the root node of a web page is the html element, so the method used is to set the font-size of the html element to adapt to the screen, but is the actual situation really that simple?

First, let's take a look at the common solutions for using rem to achieve mobile screen adaptation.

The width of the design draft is 640px, that is: designWidth = 640, and at the same time, 1rem=100px is set under 640px screen width, that is: rem2px = 100.

The advantage of setting 1rem=100px is self-evident. When front-end developers are cutting pictures and reconstructing pages, they can convert the px value measured in the UI picture into the corresponding rem value by directly shifting the decimal point, which is convenient and quick.

In addition, in the head we also set: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

The role of viewport is very important, but it is not the focus of this article so I will not elaborate on it. Students who are interested can search for it on their own.

Let’s take a look at the specific plan first:

The following four solutions are shared by colleagues. The principle is to use proportional scaling - get the ratio of the target screen width to the design draft width, use it as the base value of rem (scaling factor), and set it as the font size of the HTML tag. The only difference is the performance trade-off and writing habits.

Solution 1

 @media screen and ( min -width: 320px) {html{font- size :50px;}}
 @media screen and ( min -width: 360px) {html{font- size :56.25px;}}
 @media screen and ( min -width: 375px) {html{font- size :58.59375px;}}
 @media screen and ( min -width: 400px) {html{font- size :62.5px;}}
 @media screen and ( min -width: 414px) {html{font- size :64.6875px;}}
 @media screen and ( min -width: 440px) {html{font- size :68.75px;}}
 @media screen and ( min -width: 480px) {html{font- size :75px;}}
 @media screen and ( min -width: 520px) {html{font- size :81.25px;}}
 @media screen and ( min -width: 560px) {html{font- size :87.5px;}}
 @media screen and ( min -width: 600px) {html{font- size :93.75px;}}
 @media screen and ( min -width: 640px) {html{font- size :100px;}}
 @media screen and ( min -width: 680px) {html{font- size :106.25px;}}
 @media screen and ( min -width: 720px) {html{font- size :112.5px;}}
 @media screen and ( min -width: 760px) {html{font- size :118.75px;}}
 @media screen and ( min -width: 800px) {html{font- size :125px;}}
 @media screen and ( min -width: 960px) {html{font- size :150px;}}

Solution 2

 @media screen and ( min -width: 320px) {html{font- size :312.5%;}}
 @media screen and ( min -width: 360px) {html{font- size :351.5625%;}}
 @media screen and ( min -width: 375px) {html{font- size :366.211%;}}
 @media screen and ( min -width: 400px) {html{font- size :390.625%;}}
 @media screen and ( min -width: 414px) {html{font- size :404.2969%;}}
 @media screen and ( min -width: 440px) {html{font- size :429.6875%;}}
 @media screen and ( min -width: 480px) {html{font- size :468.75%;}}
 @media screen and ( min -width: 520px) {html{font- size :507.8125%;}}
 @media screen and ( min -width: 560px) {html{font- size :546.875%;}}
 @media screen and ( min -width: 600px) {html{font- size :585.9375%;}}
 @media screen and ( min -width: 640px) {html{font- size :625%;}}
 @media screen and ( min -width: 680px) {html{font- size :664.0625%;}}
 @media screen and ( min -width: 720px) {html{font- size :703.125%;}}
 @media screen and ( min -width: 760px) {html{font- size :742.1875%;}}
 @media screen and ( min -width: 800px) {html{font- size :781.25%;}}
 @media screen and ( min -width: 960px) {html{font- size :937.5%;}}

Solution 3

 var designWidth = 640, rem2px = 100;
 document.documentElement.style.fontSize =
  ((window.innerWidth / designWidth) * rem2px) + 'px' ;

Solution 4

 var designWidth = 640, rem2px = 100;
 document.documentElement.style.fontSize =
  ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%' ;

In order to avoid confusion in understanding, I added () in the above js code, which is not necessary in the actual code.

After a detailed analysis, the direct conversion formula between rem and px can be written as:

 1rem = 1 * htmlFontSize

htmlFontSize is the font size of the html element.

First, let’s look at the settings in Solution 1 when the screen width is 640px:

 @media screen and ( min -width: 640px) {html{font- size :100px;}}

This can be clearly shown as 1rem = 1 * 100px, which is the same as our initial setting. So what should we do to get the htmlFontSize value for other screen sizes? It is very simple, as in solution 3, because we use proportional scaling to adapt, so we can calculate the ratio of the target screen width to the width of the design draft:

 window.innerWidth / designWidth * rem2px + 'px'  

Since the default browser font size is 16px, when we use a percentage as the font size of the root node html, that is, the font-size value of the html element is set to a percentage value, the calculation method of rem will be changed to:

 defaultFontSize = 16px
 1rem = 1 * htmlFontSize * defaultFontSize

As in solution 2, the settings when the screen width is 640px are:

 @media screen and ( min -width: 640px) {html{font- size :625%;}}

Applying the formula above:

 1rem = 1 * 625% * 16px

Where: 625% * 16 = 6.25 * 16 = 100

So: 1rem = 1 * 100px

Similarly, we can get the calculation formula of the font-size value of HTML under all screen sizes, which is Solution 4:

 window.innerWidth / designWidth * rem2px / 16 * 100 + '%'  

Through the formulas of Solution 3 and Solution 4, the CSS in Solution 1 and Solution 2 can be easily generated.

Only the corresponding verification pages of Scheme 3 and Scheme 4 are given here (Scheme 1 and Scheme 2 are their variations): scheme3.html(http://htmlpreview.github.io/?https://github.com/hbxeagle/rem/blob/master/scheme3.html), scheme4.html(http://htmlpreview.github.io/?https://github.com/hbxeagle/rem/blob/master/scheme4.html)

The following two pictures show the effect when the screen width is 360px. The target is calculated as: 1rem = 56.25px. The setting value of solution 3 is: 56.25px, and the setting value of solution 4 is: 351.5625%

So far, it seems that the problem has been solved perfectly, but the actual situation is of course unexpected. On some Android phones, the default font of the browser or webview changes with the font set by the system. This will cause the default font to be larger or smaller than 16px.

After modifying the default font size, let's look at options 3 and 4.

Similarly, when the screen width is 360px, we increase the system font size, as shown below

The calculated value of the font size of the html element before setting is 18px, and the calculated value after setting is 65px. Since the screen width has not changed, our target value, that is, the font-size value we set on the html element, has not changed and is still 56.25px, but the final calculated value has deviated.

Before analyzing the deviation, let’s first look at the calculation process of Scheme 3 and Scheme 4 at a screen width of 360px:

Scenario 3:

 document.documentElement.style.fontSize = 56.25px
 htmlFontSize = 56.25px
 1rem = 1 * htmlFontSize = 56.25px

The actual value is:

1rem = 64.6875px

Solution 4:

 document.documentElement.style.fontSize = 351.5625%
 htmlFontSize = 351.5625%
 defaultFontSize = 18px
 1rem = 1 * htmlFontSize * defaultFontSize = 351.5625% * 18px = 63.28125px
 351.5625% * 18 = 63.28125

The actual value is:

1rem = 64.6875px

It seems that the calculation result of Scheme 4 is very close to the actual effect, while the deviation of Scheme 3 is large. Let's compare the calculation formulas of Scheme 3 and Scheme 4:

 // Solution 3
 document.documentElement.style.fontSize =
  window.innerWidth / designWidth * rem2px + 'px' ; 
  
 // Solution 4
 document.documentElement.style.fontSize =
  window.innerWidth / designWidth * rem2px / 16 * 100 + '%' ;

Compared with Solution 3, Solution 4 actually has an extra 16. It can be inferred that when the browser calculates the specific value of rem, if the font-size set in html is a px value, it will first divide it by 16 and then multiply it by htmlFontSize.

 1rem = 1 * (56.25px / 16) * 18
 1 * (56.25 / 16) * 18 = 63.28125

There is a problem with solution 4 because the system's default font size has been changed to 18px, but when we calculate the percentage, we still use 16px as the base value, so there is a deviation (there is a slight deviation between the calculated value and the actual value, which will be mentioned later).

In solution 3, we actually do not consider the browser's default font size, but in actual use, the browser still uses 16, and the default font size is 18px. The calculation formula for rem is as follows when the HTML fontSize is set to px:

 1rem = 1 * (htmlFontSize / 16) * defaultFontSize

When the system font size changes, defaultFontSize will change accordingly, but 16 will not change. So although Solution 3 does not consider the change of the default font size on the surface and only focuses on the width ratio between the screen and the design draft, the default font size is still used in the actual calculation, and there is also an unchanging 16 at work, causing Solution 3 to fail.

The so-called "root element" is actually not what you imagine. One is 16 and the other is 18. What they actually take is the font size of the root element.

Ok, when calculating rem, the px method will have a 16 that does not change with the system font size, so we use the percentage solution to circumvent this problem.

Solution 4, which uses percentages, uses a default font size of 16px because it is hardcoded in the calculation. So its deviation is that it fails to dynamically obtain the default font size. Update as follows:

Solution 4.1

 var designWidth = 640, rem2px = 100;
 var h = document.getElementsByTagName( 'html' )[0];
 var htmlFontSize = parseFloat(window.getComputedStyle(h, null )
                                    .getPropertyValue( 'font-size' )); 
  
 document.documentElement.style.fontSize =
  window.innerWidth / designWidth * rem2px / htmlFontSize * 100 + '%' ;

The effect is as follows:

In the 16px image, the font-size of the HTML is different from the actual value of 1rem, and the calculated value of 6.4rem is also different. By looking at the code, it is found that the font-size of HTML uses getPropertyValue('font-size') while 1rem uses getPropertyValue('width'). The deviation is that the browser rounds off when calculating font-size. Another element in the rem definition, "font size", cannot be used literally.

The deviation in 18px and the deviation between the actual value and the calculated value in Solution 4 above are the same problem. So the baseline value needs to be modified.

In the updated version, solution 4.2:

 var designWidth = 640, rem2px = 100;
 var d = window.document.createElement( 'div' );
 d.style.width = '1rem' ;
 d.style.display = "none" ;
 var head = window.document.getElementsByTagName( 'head' )[0];
 head.appendChild(d);
 var defaultFontSize = parseFloat(window.getComputedStyle(d, null ).getPropertyValue( 'width' ));
 d.remove();
 document.documentElement.style.fontSize =
  window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%' ;

The effect is as follows:

So far, the problem of rem when the default font is not 16px has been solved. Considering the design of screen rotation, the final solution for mobile phones is:

 function adapt(designWidth, rem2px){
  var d = window.document.createElement( 'div' );
 d.style.width = '1rem' ;
 d.style.display = "none" ;
  var head = window.document.getElementsByTagName( 'head' )[0];
 head.appendChild(d);
  var defaultFontSize = parseFloat(window.getComputedStyle(d, null ).getPropertyValue( 'width' ));
 d.remove();
  document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%' ;
  var st = document.createElement( 'style' );
  var portrait = "@media screen and (min-width: " +window.innerWidth+ "px) {html{font-size:" + ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) + "%;}}" ;
  var landscape = "@media screen and (min-width: " +window.innerHeight+ "px) {html{font-size:" + ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) + "%;}}"  
  st.innerHTML = portrait + landscape;
 head.appendChild(st);
 return defaultFontSize
 };
 var defaultFontSize = adapt(640, 100);

Let’s look back at the definition of rem, “The font size of the root element.” The root element we thought of as html actually has a shadow at work, and the font-size we thought of is actually an approximate value.