rem figma

1When the design is 640px, the screen under the 320px display effect is 1rem=20px; by dynamically changing the page, each element of the page can calculate the size of the element through the fontsize of the root node.Use REM for responsive layout (JS dynamic loading)

1Get URL parameters and REM screen adaptation

First, the user adjusts the browser font size, affects the Web page that opens from the browser.The browser sets the font size, which affects the page that the browser opens. JS can control the user to modify the font size, so that the page is not affected.　　(Function (doc, win) {//) the font size (ie doc.documentElement.currentStyle) {var user_webset_font=) of the browser that gets the user's settings in the native method doc.documentelement.currentstyle[' FontSize ']; } else {var user_webset_f

~function() { function() { = 640; = document.documentElement.clientWidth; if (devw>=640) { = ' 100px '; return ; } = DEVW/DESW * + ' px '; } Computed (); Window.addeventlistener (' resize ', computed,false); } ();Mobile page REM Adaptive

before doing desert education, direct to the design map, and then rape, scale processing. Simple. Straight, Rough! However, development is fast. ...... Once! But that is, now developed, as the industry conscience: can't do that! (That was forced.)First look at the code:@media screen and (max-width:362px) and (min-width:330px) {html{font-size:60%;}. top-banner{//font-size:15px//}//.btn-download{//margin-left:5%;}} @media screen and (max-width:330px) {html{font-size:53.333331%;}. top-banner{//font

1.JS loading sequence and loading methodThe page load order is usually loaded from top to bottom, so we should calculate the HTML font-size before the content area, that is, the body and the DOM contained in the body have not been traversed by the browser. We should put the computational font JS before the body, as follows:Recommended-native notation (optimized loading, faster body display):function Resize () {var htmlele = document.documentelement;var htmlwidth = window.innerwidth;HtmlEle.style

1: Nonsense not much to say, look directly like the table: 2:PX does not introduce too much, is the size of the pixel, add your screen resolution of 1920, then each of the equivalent of each has a transverse 1920 pixels; 3:em is a relative unit, generally defined in the body of the font-size as the benchmark, the default value of 1em = 16px, if we want to use "1em" = "10px" to replace the default value "1em" = "16px", should write the following code: Body{font-size:62.5%;/*10÷16x100% = 62.5%*/}

This event is triggered when the direction of the device changes (the device is held horizontally or vertically). When this event is bound,Note that we now bind the Resize event when the browser does not support the Orientationchange event.The main thing is to listen to the changes in the window, once a change, you need to reset the root font valuevar resizeevt = ' Orientationchange ' in window ? ' orientationchange ' : ' resize ', Recalc = function() { //Set root font sizedocument.

Mobile Page Scaling Method (iii) REM layout