Web App Adaptive Scheme summary rem of keyword elastic layout

There are now 5 different schemes for the adaptive layout of mobile web apps.

0. Flexbox

The use of CSS3 Flexbox for layout, support for rich media and complex typography is very strong, not universal compatibility is very poor, almost no project to be applied.

I. Flexible layout

Relative layout with EM or REM units makes the relative percent more flexible, while supporting the normal display of browser font resizing and scaling. Because EM is relative to the parent element the reason is not promoted.

Two. Flow layout (FLUID)

Use%% to define width, most of which are fixed by PX, which can be adjusted according to the visual area (viewport) and the real time dimensions of the parent element, as much as possible to adapt to various resolutions. Often with max-width and other attributes to control the size of the flow range to avoid too large or too small impact reading. Masterpiece Fence System (grid system)

Three. Responsive layout (responsive)

Use a @media media query to switch different types of devices to different sizes and media. In a good response range design can give the appropriate range of equipment the best experience, under the same device is the actual or fixed layout.

Four. Adaptive layout (Adaptive)

Usually using the @media media Query and grid system (grid systems) with the relative Layout unit layout, in fact, is a comprehensive response, flow, such as the above technology through the CSS to a single Web page different devices to return different styles of technology collectively. Self-adaptation has almost become a standard for excellent page layouts.



This article is mainly about the use of REM.

A new length unit, REM, was introduced into the CSS3. Official definition font size of the root element

Rem:rem is a relative unit, as is the EM unit. The difference is that EM is computed relative to the font-size of the element's parent element, and REM is computed relative to the font-size of the root element HTML. This makes REM bypass complex hierarchical relationships and achieve functions similar to EM units.

Compatibility: Ie9+,firefox, Chrome, Safari, Opera's mainstream version are supported. (Ie6-8 is not supported but consider mobile web apps)

1. Calculating REM for design drafts

All browsers consistently default to the default font size of 16px 1em:16px, but a 1:16 ratio is not convenient to calculate. Here the document element is set font-size:62.5%, it is convenient to use decimal to calculate, (CSS preprocessing tool can use default value)

HTML {font-size:62.5%;/*10÷16x100% = 62.5%*/} body
{font-size:1.4rem;/*1.4x10px = 14px *
/} h1 {font-size: 2.4rem;/*2.4x10px = 24px*/}

So if I have a design with a width of 640, I can calculate the REM size of the corresponding element by the method above. (Note: The actual project can not be set to font-size:62.5%, because Chrome does not support less than 12px font, when the calculation is less than 12px, will default to take 12px to calculate, resulting in chrome REM calculation is inaccurate)



2. Calculating Font-size for different resolution

Listening for browsers changing HTML font-size

(Function (doc, win) {
var docel = doc.documentelement,
resizeevt = "orientationchange" in Window?)      "Orientationchange": "Resize",
Recalc = function () {
var clientwidth = docel.clientwidth;
if (!clientwidth) return;
docEl.style.fontSize = * (clientwidth/320) + "px";
};
if (!doc.addeventlistener) return;
Win.addeventlistener (Resizeevt, Recalc, false);
Doc.addeventlistener ("domcontentloaded", Recalc, false);
(document, window);

The REM value is computed with the CSS preprocessing tool. Sass, less, Stylus