Web App Adaptive Solution Summary keywords elastic layout of REM

In summary, there are 5 kinds of adaptive layouts for mobile web apps, which are mature in turn.

0. Flexbox

With CSS3 Flexbox for layout, support for rich media and complex typography is very strong, not universal compatibility is very poor, almost no application in any project.

I. Flexible layout

Use EM or REM units for relative layout, and a more flexible relative% percentage, while supporting normal display of browser font sizing and zooming.

Two. Flow-through layout (FLUID)

Use% percent to define the width, most of the height is fixed with PX, can be based on the visible area (viewport) and the parent element of the real-time size adjustment, as far as possible to adapt to various resolutions. Often with max-width and other properties to control the size of the flow range to avoid too large or too small impact reading. Representative Fence System (grid system)

Three. Responsive layout (responsive)

Use @media media queries to switch different samples for devices of different sizes and media. The excellent response range is designed to give the device the best experience within the range, and the actual or fixed layout under the same device.

Four. Adaptive layout (Adaptive)

Typically, the use of @media media queries and grid systems (grid system) to layout with relative layout units, in fact, the integrated response, flow, and so on, the above-mentioned technology through CSS to a single page different devices return different styles of technology collectively. Adaptive has almost become the standard for excellent page layouts.

This article is mainly about the use of REM.

CSS3 introduced a new unit of length, Rem.

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

Compatibility: Ie9+,firefox, Chrome, Safari, Opera mainstream versions are supported.

Web App Adaptive Solution Summary keywords elastic layout of REM