Learn about real "REM" phone screen adaptation

Rem, as a low-key unit of length, has been reused in screen adaptation due to the rise of mobile web. Rem front-end developers can easily achieve the effect of design requirements in various screen sizes through proportional scaling.

Rem’s official definition is “The font size of The root element.”, which takes The font size of The root node 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 for screen adaptation, but is it really that simple?

First let’s take a look at the common schemes for using REM to achieve screen adaptation on mobile phones.

Make the design 640px wide (designWidth = 640) and set the screen width at 640px to 1rem=100px (rem2px =100).

The advantages of setting 1rem=100px are self-evident. The front-end developer can convert the PX value measured in the UI map into the corresponding REM value by directly shifting the decimal point when cutting the map and reconstructing the page, which is convenient and fast.

In addition, in head we also set: viewport is important, but not the focus of this article, so we will not expand, interested students can search on their own.

Let’s take a look at the specific plan:

The following four schemes, shared by colleagues, all use proportional scaling — get the ratio of the width of the target screen to the width of the design, use it as the base value for REM (the scaling factor), and set it to the font size of the HTML tag. The only difference is in performance trade-offs and writing habits.

Plan 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.5937px; }} @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; }}Copy the code

@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%; }}Copy the code

Plan 3

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

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

To avoid confusion, I added () to the js code above, which is not needed in the actual code.

For detailed analysis, the direct conversion formula between REM and PX can be written as:

1rem = 1 * htmlFontSize
Copy the code



HtmlFontSize is the font size of an HTML element.

First, let's look at the setting of scheme 1 with a screen width of 640px:

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

This is pretty obvious: 1rem = 1 * 100px, the same as our initial setup. So what do we do to get htmlFontSize values for other screen sizes? Very simple as scheme 3, because we use equal scale adaptation, so calculate the target screen width and the width of the design can be:

window.innerWidth / designWidth * rem2px + 'px'Copy the code

Since the browser default font size is 16px, when we use percentage as the font size of the root HTML, i.e. the FONT size of the HTML element is set to a percentage value, rem is computed as follows:
defaultFontSize = 16px
1rem = 1 * htmlFontSize * defaultFontSize
Copy the code
 

For example, in scheme 2, when the screen width is 640px:

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

Apply the above formula:
625% * 16 = 6.25 * 16 = 100 so: 1rem = 1 * 100pxCopy the code
 

Similarly, the calculation formula of HTML font size value under all screen sizes can be obtained, which is scheme 4:

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

Using the formulas in scheme 3 and 4, you can easily generate the CSS in scheme 1 and Scheme 2.
Only the corresponding validation pages for schemes 3 and 4 are shown here (schemes 1 and 2 are variations of them) : scheme3.html, scheme4.html

As shown in the following two images, the screen width is 360px, and the calculated target is 1rem = 56.25px. Set the value to 56.25px in plan 3 and 351.5625% in Plan 4




Plan 3
Plan 4









So far it seems to have worked out perfectly, but of course there's been an accident. On some Android phones, the default font for the browser or WebView changes with the system Settings. This will result in a default font greater than or less than 16px.
After changing the default font size, let's look at options 3 and 4.
Also with a screen width of 360px, we increased the system font size to look like this

Set the computed font size of the pre-HTML element to 18px and the computed font size of the post-html element to 65px. Since the screen width has not changed, our target value, that is, the font size we set on the HTML element, is still 56.25px, and the computed value is not correct.




Plan 3
Plan 4









Before analyzing the deviation, let's first look at the calculation process of plan 3 and Plan 4 under the screen width of 360px:
Solution 3:
Document. The documentElement. Style. FontSize = 56.25 px htmlFontSize = 56.25 px 1 rem = 1 * htmlFontSize = 56.25 px actual is: 1 rem = 64.6875 pxCopy the code
 

Solution 4:
Document. The documentElement. Style. FontSize = 351.5625% 351.5625% defaultFontSize htmlFontSize = = 18 px 1 rem = 1 * HtmlFontSize * defaultFontSize = 351.5625% * 18px = 63.28125px 351.5625% * 18 = 63.28125 Actual: 1rem = 64.6875pxCopy the code
 

It seems that the calculation result of scheme 4 is very close to the actual effect, while scheme 3 has a large deviation. Then compare the calculation formula of plan 3 and Plan 4:

/ / solution 3 document. DocumentElement. Style. FontSize = window. The innerWidth/designWidth * rem2px + 'px'; / / plan 4 document. DocumentElement. Style. FontSize = window. The innerWidth/designWidth * rem2px / 16 * 100 + '%';Copy the code

Compared with scheme 3, scheme 4 actually has more than 16. It can be assumed that when the browser calculates rem value, if the HTML font size is set to PX value, it will first divide by 16 and then multiply by htmlFontSize.
1rem = 1 * (56.25/16) * 18 1 * (56.25/16) * 18 = 63.28125Copy the code
 

The problem with scheme 4 is that the default font of the system is changed to 18px, but when we calculate the percentage, we still calculate with 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 scenario 3, the default font size of the browser is not considered, but in actual use, the browser is still 16, and the default font size is 18px. The calculation formula of REM in the case that fontSize of HTML is set to PX is as follows:
1rem = 1 * (htmlFontSize / 16) * defaultFontSize
Copy the code
 

DefaultFontSize changes when the system-set font size changes, but 16 does not. Therefore, although plan 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, it still uses the default font size in the actual calculation, and there is a constant 16, resulting in the failure of Plan 3.

The so-called "root elements" are not as expected, one is 16, the other is 18, and the font size of the root element is taken.

Ok, in rem calculation, there will be a 16 in px mode that does not change with the font size of the system, so we use the percentage scheme to bypass this problem.
Use percentage option 4 because the default font size is 16px in the calculation. So the bias is that it doesn't dynamically get the default font size. Updates as follows:
Scheme 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 + '%';Copy the code

The effect is shown below:

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. Font-size: 16px; GetPropertyValue ('font-size') while 1rem uses getPropertyValue('width'), which is rounded by the browser when calculating font-size. Another element in the REM definition, "font size," cannot be used literally either, declaring it lost.
The deviation in 18px and the deviation between the actual value of 18px and the calculated value of scheme 4 above are the same problem. So the base values need to be revised.




16px
18px









In update 1, Scheme 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 + '%';Copy the code

The effect is shown below:



16px
18px









So far, the processing of REM when the default font is not 16px has been solved. Considering the design of screen rotation, the final solution for mobile is as follows:

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);Copy the code

Back to The definition of REM, "The font size of The root element." What we think of as the root element -- HTML -- is actually a shadow, and what we think of as font size is actually an approximation.