Using and understanding the mobile terminal rem

First code on 
the window.onload = function () { getRem (720,100) }; window.onresize = function () { getRem (720,100) }; function getRem (PWIDTH, PREM) { var = document.getElementsByTagName HTML ( "HTML") [0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.style.fontSize = oWidth / pwidth * PREM + "PX"; }

first we have to understand why the use rem, rem What is the role?
rem: inherited font-size size html, such as html the font-size equal to 16px, then 1rem is equal to 16px.
Here, since the size of html rem can inherit the font-size, we can use the monitor window size, to dynamically change the html of the page to make the font-size is compatible with various mobile end phones.

For example
Mobile terminal screen width ratio obtained by dividing the width of the design, such as a screen width equal 750px, design width equal 1000px, 750 divided by 1000 to give 0.75px, 1px design is to say, the browser on the display size of 0.75px here we want to inherit the ratio of the size, method of rem, the size of the font-size method of inheritance html to achieve, set the font-size equal to html 0.75px (0.75px screen corresponds to the design of 1px), rem will inherited font-size size html, so 1rem would mean that we use in the design of 1px inside page, the back can be ignored (for convenience we can get the design and screen width ratio multiplied by 100 equals 75, now 1rem equal to the design of 100px, 0.01rem equal 1px design drawings.
formula screen width / design width * 100 = html font-size ( 0.01rem equal 1px design of)

what is inadequate or wrong, please point out, first secondary generalization blog, send your own perception and understanding

Guess you like

Origin www.cnblogs.com/liangziaha/p/11227134.html