The use of REM in mobile Web development

Why use REM

　　Mobile device size of a variety of, simple use of PX this unit can not easily fit, REM will solve this problem for us!

How to use REM

　　1rem is equal to 16px by default, because the default font size for a page is 16px. R stands for rootelement, so you can change the size of 1rem just by modifying the font-size size of the HTML!

told UI designer

Mobile design manuscript size to be made 640*750 ! Mobile design manuscript size to be made 640*750! Mobile Design manuscript size to be made 640*750! Important thing to say three times! (640 fixed, highly variable)

when you get the picture ,

　　The General people will be the design drawings by the width of the direction of a number of parts (not fixed, good to calculate), such as 640 wide design manuscript, divided into 20 parts, 640/20 = 32, then 32 as the design of REM units, 1rem equals 32px, then in the design of the volume to a width of 100px elements, The actual project is 100/32 REM (which translates the measured dimensions into REM values in the design diagram)

Therefore, in different devices we only need to dynamically set the HTML Font-size = device width/20 (20 is just the number of copies of your share)

The following code is written directly on the page, and to be written at the top of the page, JS to be executed immediately when the page opens !

<script type= "Text/javascript" >
    Sets the font-size of the HTML according to the width of the screen
    Calculate font-size
    var fontSize = window.screen.availwidth/20;
    Document.queryselector (' HTML '). style.fontsize = fontSize + ' px ';
Executed when the browser window is resized
    Window.onresize = function () {
       Calculate font-size
        var fontSize = window.screen.availwidth/20;
        Document.queryselector (' HTML '). style.fontsize = fontSize + ' px ';
    }
</script>

The use of REM in mobile Web development