px fixed layout: in pixels as a basic unit of the page, regardless of the width of the device screen and browser, only the size of a design.
Switchable fixed layout: (Chongjie Jingdong), in units of px, reference mainstream device size, design layout of sets of different widths. By identifying the size or width of the browser screen, select the most suitable set of layout width
Elastic layout: (Percentage distribution / flow layout, the layout is not flexible pouch) as a percentage of pages as the basic unit, the device can be adapted to all the width of the browser and screen size in a certain range, and effective use of space can perfectly show the best results
Hybrid Layout: with the flexible pouch similar layout, but mix and match, pixel mixing, and other units as a percentage of page units.
Response layout: the page is implemented responsive design, layout design required for different widths of the same content, there are two ways: pc Priority (starting from the pc-down design); preferentially moved (upward from the mobile terminal design) ; no matter which model-based design, to be compatible with all devices inevitably need to make some changes (layout change occurred critical point called breakpoint) module layout when the layout of the response.
NOTE:
the flexible pouch layout flex
rem layout
flex layout Layout + vw
Responsive layout
Responsive layout features
- Design features:
the face of strong flexibility devices with different resolutions
can adapt quickly to solve the problem of multiple devices display - Cons:
compatible with various devices workload, inefficient
code is cumbersome, hide unwanted elements appear, lengthen load times
in fact, this is a compromise solution for the design of nature, affected by many factors, not reach the best results
must changed the layout of the site of the original extent, there will be user confusion
Set Mate label
Responsive Layout Preparation: Set Meta Tags
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width = device-width: a width equal to the current width of the device
initial-scale: initial scale (default is 1.0)
Minimum-Scale: allows the user to zoom to the minimum ratio (default is 1.0)
maximum-Scale: allows the user to zoom the largest proportion (default is 1.0)
the user-Scalable: whether the user can manually zoom (default is no, because we do not want the user to zoom the page)
Reproduced in: https: //www.jianshu.com/p/95d711f1fe5d