Mobile REM layout and Percent rasterization layout

REM on the mobile side:

How to use:

• Set the font-size of HTML to scale according to the browser resolution
  • • Set the root element font-size to 100px so that the useful value, do not set to 10px such;
    • Then get the browser's resolution, which is the viewport width, p (scale bar) = Viewport width/width
    • root element font-size=100px*p
    • And then a resize to follow the browser size change

 1 (function (Win) {7 var doc = win.document, 8 html = doc.documentelement, 9 option = Html.getattribute (' Dat A-use-rem '); (option = = = null) {return;13}14//Defaut basewidth:640px;16 var basewidth = parseint (option). toString () = = = ' NaN '? 640:parseint (option); n var grids = basewidth/100;18 var clientwidth = Html.clientwidth | | 320;19//Set REM first21 html.style.fontSize = clientwidth/grids + ' px ';//create TESTDOM24 var test Dom = document.createelement (' div '); var testdomwidth = 0;26 var adjustratio = 0;27 TestDom.style.cssText = ' Heigh T:0;width:1rem; '; Doc.body.appendChild (testdom); var calctestdom = function () {testdomwidth = testdom.offsetwidth;32 I F (testdomwidth!== Math.Round (clientwidth/grids)) {adjustratio = clientwidth/grids/testdomwidth;34 var r     Ecalcrem = clientwidth*adjustratio/grids;35 html.style.fontSize = recalcrem + ' px ';  Doc.body.removeChild (testdom);}39};40//Detect if REM Calc is working directly42//If not, recalc an      D Set the REM value43 setTimeout (calctestdom); var recalc = function () {$ var NEWCW = html.clientwidth;47 if (NEWCW = = = clientwidth) {return;49}50 clientwidth = newcw;51 html.style.fontSize = newcw* (A DJUSTRATIO?ADJUSTRATIO:1)/grids + ' px ';//if (testdom) setTimeout (calctestdom, +),};54//Abort if BR Owser does not addEventListener56 if (!doc.addeventlistener) {return;58}59 $ var resizeevt = ' Orient Ationchange ' in Win? ' Orientationchange ': ' Resize '; Recalc Win.addeventlistener (RESIZEEVT, detect, False); D. Doc.addeventlistener (' domcontentloaded ', Recalc, false); (window);

Above is a piece of code written by Xiaojue, an important part of which is to determine whether the size of the div is accurate

Speaking of REM layout, here's the percent layout.

Percent Rasterization layout:

Here the grid layout method and ideas are actually very simple, according to Bootstrap idea, is a container, width or 100%, with a molecule to the container into many parts, bootstrap method is to use a percentage of the method to divide the container into n equal, This is the idea of rasterization, in fact, it is not difficult to see how your ideas are, the implementation is different. You will have the opportunity to learn some of the grid layout ideas and excellent methods in depth.

The above describes the two mobile-side layout methods, in fact, we summarize their advantages and disadvantages, REM can only be in the mobile side of the layout, and then proportional scaling, in the PC side or px this customary way to achieve better, REM can not achieve a responsive layout, which is an important disadvantage, REM only plays a good role in the mobile end, of course, the future development will probably, but also some people have invented a strong design plan. And the percentage of the layout, this way there is a big problem, he is unable to achieve high, this is why, because the percentage is fixed high, sometimes the bug is obvious, so many people use PX high, so different resolution of the phone will make the display is not the same.

Mobile REM layout and Percent rasterization layout