Learn about the true "REM" multi-terminal screen adaptation

Hbxeagle Link: github.com/hbxeagle/rem/blob/master/readme.md

As a low-profile unit of length, REM is reused in screen adaptations due to the rise of mobile Web pages. With REM front-end developers, it is easy to achieve the desired effect of the design drawing in a variety of screen sizes by scaling.

The official definition of REM is "the font size of the root element.", which is the length of the root node's font size as the base value. It is generally believed that the root node in a Web page is an HTML element, so the way to do this is by setting the HTML element's font-size to fit the screen, but is it really that simple?

First, let's take a look at the common scenarios for using REM to adapt your phone's screen.

To design the width of 640px, namely: Designwidth = 640, at the same time set in the 640px screen width under 1rem=100px, namely: rem2px = 100.

The advantages of setting 1rem=100px are self-evident. Front-end developers in the transduction, refactoring the page, by direct displacement of the decimal point, you can be measured in the UI map px value to the corresponding REM value, convenient and fast. In addition, in head we also set up: <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 "/>viewport role is very important, but not the focus of this article so do not expand, interested students can search by themselves.

First look at the specific scenario:

The following four scenarios are shared by colleagues, and the principle is to use equal-to-scale methods-to get the ratio of the target screen width to the width of the design, as the base value of REM (scaling factor), set to the font size of the HTML tag. The difference is in the performance trade-offs and writing habits.

Scenario 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;}} 

Scenario 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%;}} 

Scenario 3

var designwidth = 640, rem2px = 100;document.documentelement.style.fontsize =  ((window.innerwidth/designwidth) * RE m2px) + ' px ';

Scenario 4

var 640  -  =   '%';

In order to avoid the confusion of understanding, I added the above JS code (), the actual code is not required. A detailed analysis of the REM and PX Direct conversion formula can be written as:

1rem = 1 * htmlfontsizehtmlfontsize is the font size of the HTML element.

First, consider the settings in Scenario 1 with a screen width of 640px:

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

It can be obvious to show this point 1rem = 1 * 100px, with our initial setting. So what do we do to get the htmlfontsize value of the other screen size? As simple as scenario 3, since our adoption is more adaptable than scaling, it is possible to calculate the ratio of the target screen width to the width of the design draft:

Window.innerwidth/designwidth * rem2px + ' px '

Since the browser default font size is 16px, when we use percentages as the font size of the root node html, that is, when the font-size value of the HTML element is set to a percentage value, REM is calculated as follows:

Defaultfontsize = 16px1rem = 1 * htmlfontsize * defaultfontsize

As in Scenario 2, the setting for the screen width is 640px:

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

Apply the formula above:

1rem = 1 * 625% * 16px Where: 625% * 16 = 6.25 * 16 = 100 so: 1rem = 1 * 100px

The same can be obtained for all screen sizes, the font-size value of the HTML is calculated as a formula for scenario 4:

Window.innerwidth/designwidth * REM2PX/16 *  + '% '

Demo screen rotation, the final multi-terminal solution is: With the% display to layout

<!DOCTYPE HTML><HTML><HeadLang= "en">    <MetaCharSet= "UTF-8">    <title></title>    <Metaname= "Viewport"content= "Width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">    <Script>window.onresize= function() {Adaptrem ()}; Window.onload= function() {Adaptrem ()}; functionAdaptrem () {varHead=Window.document.getElementsByTagName ('Head')[0]; varTdiv=Window.document.createElement ('Div'); varScreenw=window.innerwidth||Document.body.clientWidth; vardefaultfontsize= 0; varadaptfontsize= 0; varTstyle; Tdiv.style.width= '1rem'; Tdiv.style.display= "None";            Head.appendchild (TDIV); Defaultfontsize=parsefloat (window.getComputedStyle (Tdiv,NULL). GetPropertyValue ('width'));            Tdiv.remove (); Adaptfontsize=Screenw/  - -defaultfontsize+  - + "%"; Document.documentElement.style.fontSize=adaptfontsize; Tstyle=Document.createelement ('style'); Tstyle.innerhtml= "@media screen and (min-width:" +Screenw+ "px) {html,body{font-size:" +adaptfontsize+ ";}}"; Tstyle.setattribute ('ID', 'Adapt'); if(document.getElementById ('Adapt') {document.getElementById ('Adapt'). Remove ();        } head.appendchild (Tstyle); }    </Script></Head><Body>Hello, world! </Body></HTML>

Learn about the true "REM" multi-terminal screen adaptation