Layout of CSS Layouts

First , Flow-type layout (Liquid layouts)

The feature of streaming layout (Liquid) (also called "Fluid") is that the width of the page element is adapted to the screen resolution, but the overall layout is the same. Representative Fence System (grid system).

The size of the main dividing area in the page is used as a percentage (with the min-*, max-* attribute), for example, to set the width of the Web page body to 80%,min-width to 960px. The picture is also treated similarly (width:100%, max-width is generally set to the size of the image itself, preventing it from being stretched and distorted).

1, layout features: When the screen resolution changes, the size of the elements in the page will change, but the layout is unchanged. "This causes the element to not display properly if the screen is too large or too small"

2, Design method: Use% percent to define the width, height is mostly with PX to hold, 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 a variety of resolutions. Often with max-width/min-width and other properties to control the size of the flow range to avoid too large or too small impact reading.

this layout in the early history of Web front-end development, used to deal with different sizes of PC screens (when the screen size difference is not too large), in today's mobile development is also a common layout , but the shortcomings are obvious : the main problem is if the screen scale span is too large, it does not display properly on screens that are too small or too large relative to their original design. Because the width is defined using% percent, but the height and text size are mostly fixed with PX, so the display effect on the big screen will change to some page element width is pulled very long, but the height, text size or the same as the original (that is, these things can not become "streaming"), the display is very uncoordinated.

two . Adaptive layouts (Adaptive layout)
The adaptive layout is characterized by defining layouts for different screen resolutions, i.e. creating multiple static layouts, one for each screen resolution range. Changing the screen resolution allows you to toggle between different static parts (page element position changes), but in each static layout, the page elements do not change with the size of the window. You can think of adaptive layouts as a series of static layouts.
1, layout features: When the screen resolution changes, the position of the elements inside the page will change and the size will not change.
2, Design method: Use @media media query to different sizes and media devices to switch different styles. 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.

Iii. responsive layouts (responsive layout)

With the advent of Media query technology in CSS3, the concept of responsive design appeared. The goal of responsive design is to ensure that a page on all terminals (various sizes of PCs, mobile phones, watches, refrigerators, web browsers, etc.) can show a satisfactory effect, for the CSS writer, in the implementation of not rigidly adhere to the specific approach, but usually a mix of flow layout + elastic layout, And the use of media query technology. --Define layouts for different screen resolutions, and in each layout, apply the idea of a streaming layout, where the page element width is automatically adapted as the window adjusts. That is: Create multiple fluid layouts, one for each screen resolution range. Responsive layouts can be thought of as a blend of flow layouts and adaptive layout design concepts.

Responsiveness has become almost standard for excellent page layouts.

1, layout features: Each screen resolution below there will be a layout style, that is, the element location and size will change.

2, Design method: Media query + flow layout. 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.

Advantages: Adaptable to PC and mobile, if patient enough, the effect is perfect

Disadvantages: (1) Media query is limited, that is, can be enumerated, can only adapt to the mainstream of the wide-height. (2) to match enough screen size, the workload is not small, the design also requires multiple versions.

Layout of CSS Layouts