Mobile phone-side REM usage

!function (n) {    var  e=n.document,         t=e.documentelement,         i=720,         d=i/100,         o= " Orientationchange "in n?" Orientationchange ":" Resize ",         a=function () {             var n=t.clientwidth| | 320;n>720&& (n=720);             t.style.fontsize=n/d+ "px"         };         e.addeventlistener&& (N.addeventlistener (o,a,!1), E.addeventlistener ("domcontentloaded", a,!1)} (window);

Method 2

Window.onload =function(){    /*720 on behalf of the designer to give the width of the design manuscript, your design draft is how much, write how many, 100 represents the conversion ratio, here write 100 is to calculate later, for example, you measure a width is 100px, can write as 1rem, and 1px=0.01rem and so on*/Getrem (720,100)};window.onresize=function() {Getrem (720,100)};functionGetrem (pwidth,prem) {varhtml = document.getelementsbytagname ("html") [0]; varOwidth = Document.body.clientWidth | |Document.documentElement.clientWidth; Html.style.fontSize= Owidth/pwidth*prem + "px";}

First of all, first of all, a common sense, the browser's default font height is 16px

The basic idea is: the use of REM units, is relative to the size of the (HTML) font, to calculate the width of the corresponding element is generally set to the HTML font-size: 20px or 30px or 50px or 100px and the use of the browser default size (16px) is 16px *62.5%=10px, this is html{font-size:62.5%;}, not html{font-size:10px;} Because the smallest browser (PC) is 12px. So 1rem = 10px; Let's take a quick look: <div id= "wrap" >      <div id= "Div1" > I'm a div tag </div></div>css setting style # wrap{   
font-size:20px;
} #div1 {      font-size:1em;    Width:16em;     Height:2em;   Background-color:lawngreen;}

　　

Mobile phone-side REM usage