Use REM to restore the Web mobile-responsive page with no brain

(function  (win,doc) {    ifreturn;     var html=document.documentelement;     function SetFont ()    {var cliwidth=html.clientwidth;        Html.style.fontSize=100* (cliwidth/640) + ' px ';        }       win.addeventlistener (' resize ', SetFont,false)    Doc.addeventlistener (' domcontentloaded ', SetFont,false)}) (window,document);

Interpretation:

First of all, do not go to the bird does not support the event monitoring browser (IE6, 7, 8), of course, do not write, because the size of the adaptive requirements are mobile side.
When the window size changes, a listener is bound to run a function called SetFont, and when the DOM structure of the page is loaded, it runs SetFont (or does not listen directly to SetFont (). ）
The SetFont function is used to get the screen resolution and then proportionally to set the font size of the HTML.
I am here to scale on a 100px basis. Why is 100px? For me to explain carefully:
We generally take the hand of the design is 640px, we do not consider the resolution of the cell phone, if the simple 1:1 to restore the 640px page, then our page root directory is the font size is, then the 100px（100*（640/640）=100px） design Draft on a copy, then PS tells us that the font size is 24px, Then we will be in the page to the text set to 0.24rem, then the 640px page font is 24px.
Then when we consider such as the page is 5/5s, then the current page size is 50px（100*(320/640)=50px） , then 0.24rem will be displayed in 12px size. and 640px wide design manuscript on the 24px font, in the 320px page, is the 12px display ~
This is why to 100px as the base font size, so that the volume of the page is 24px font, my code to write 0.24rem will automatically in the page to 12px display ~ and it can be on the 6/6p with 13 or 14px style display ~
Then you say, I met a wonderful 750px for the resolution of the design (such as Iphone6), then you change the formula to 100*(cliWidth/750) +px on the line (that is, how wide the design draft, the formula will write how much). Then design the amount of xpx size, write how much 0. xrem~ What resolution of the design draft is not afraid of

Tips

100px just to let me lazy do not have to convert font size, if you like to order 1000px, and then write 0.012rem so. But do not write a basic font size such as 10px, because some browsers have the minimum font size limit, such as setting the page base font size is 10px, but in fact, the minimum is 11px, then 2rem font, itself is to be displayed in 20px, may finally be 22px display.

Use REM to restore the Web mobile-responsive page with no brain