rem
· Rem Unit: CSS3 a relatively new unit; phase, such as font-size dynamically calculated value for the root element of the html font-size: 14px, 1rem = 14px.
Example: html-fontsize value calculation according to the current width of the screen width and the design draft
Design draft width: 640px, fontsize: 14px, screen width is 375px, the fontsize = 375/640 * 14 That is: 375/600 = fontsize / 14
If the fontsize html changed, the values of all previously set rem units will follow automatically enlarged or reduced; mobile terminal in response to the current layout, recommended rem.
Note: rem need is available with media queries to achieve a responsive layout
in
· Em units: relative to the font size of the parent element, by default, 1em = 16px
Generally applicable to a responsive, but not recommended, relatively complicated calculation.
vw / vh
vw Unit: Percentage viewpoint width window width (window width 1vw behalf of 1%)
vh Unit: height percentage viewpoint height windows (window 1 VH representative of a height of 1%)
Generally applies percentage layout.
Adaptive response layout and layout differences
1. Adaptive layout viewport by detecting the resolution, to determine the current access device is: pc end plates, mobile phones, thereby requesting the service layer, return to different pages;
Responsive layout viewport by detecting resolution, for different clients, the client code handles do, to show different layout and content.
2. The need to develop sets of adaptive layout interface;
Responsive layout only need to develop a set of interface on it.
3. The adaptive page layout screen adaptation is done in a certain range: for example, the pc is generally greater than 1024 pixels, is less than 768 pixels mobile terminal;
Responsive layout is a page full adaptation.
4. If the adaptive layout of the screen is too small content occurs too crowded;
Responsive layout concept is to solve this problem derived, it can automatically recognize and adjust for screen width web design.
In short, responsive layout is a little better than the adaptive layout, but the layout is more appropriate adaptive real, because you only need to consider several states on it rather than responsive layout needs to be considered very large state. So to say that no matter what kind of design have their own characteristics, we need to choose the appropriate layout according to the needs of the project.