About mobile-side layouts

issues with mobile-side layouts

Nowadays mobile devices are diverse, screen sizes vary, and here are a few mobile-side layouts today.
1. Width percent layout + px layout.
First of all, this layout although I do not use now, but still have seen, this layout if you follow the 750 design plan to do in fact, in the mainstream mobile phone screen display is very good, but if the screen is not mainstream, it shows the effect is very poor, so this layout is not recommended to use.
2. Media query + px layout
This kind of layout is still possible, but the media query is also within a range, and the different intervals should be how large the PX is written. This is also a problem.
3. REM Layout + Flex layout
OK, to the point, this is my current layout, about the flex layout, strongly recommend Nanyi about the flex layout of this chapter, or the Novice tutorial content can also, as Nanyi. Now, focus on the REM layout. Why use REM layout

The principle of REM layout
First say REM this unit, REM this unit is based on the HTML root font to determine, now the browser default HTML root font is 16PX, that is 1rem = 16px, you can do the experiment:

HTML {
 font-size:100px;
}
div {
width:1rem;
}

So the last div to show the width is actually 100px, know this principle, then if we use the REM unit layout, and then according to the size of the phone screen to change the HTML root font size, so do not realize the mobile phone screen adaptation.

How to dynamically change the size of the HTML root font.
Online about this kind of JS a lot, I say I am using the JS, feel relatively simple and easy to understand:

function Rem (doc, win) {
    var docel = doc.documentelement,
        resizeevt = ' onorientationchange ' in window? ' Onorientationchange ': ' Resize ',
        recalc = function () {
            var clientwidth = docel.clientwidth;
            if (!clientwidth) return;
            if (clientwidth >=) {
                docEl.style.fontSize = ' 100px ';
            } else {
                docEl.style.fontSize = + * (Clientwidt h/750) + ' px ';
            }
        };

    if (!doc.addeventlistener) return;
    Win.addeventlistener (Resizeevt, Recalc, false);
    Doc.addeventlistener (' domcontentloaded ', Recalc, false);
}
REM (document, window);

General design drafts are given in accordance with 750来, 750 is iphone6 design Draft, is the physical phone width of twice times, so the above function in iphone6 above the root font set is actually 50px, so we write CSS, directly according to the design of the amount of PX units divided by 100, The resulting value is the REM value, about REM conversion, sublime and Vscode with CSS to REM plug-ins, and then you can write a scss conversion function to convert:

@function REM ($px) {
    @return ($px/100) * 1REM;
}