Static Layout

In traditional Web design, all elements on a Web page use px as the unit of size.

1, layout characteristics

Regardless of the browser size, the layout of the web page remains the same as when the code was originally written. Normal PC websites are static (fixed width), that is, set min-width so that if it is smaller than this width, the scroll bar appears, if it is larger than this width, the content is centered with a background. This design is common on PC.

2. Design method

PC: Center Layout, all styles use absolute width/height (PX), design a Layout, in the screen width and height adjustment, use horizontal and vertical scroll bars to view the covered part; Mobile: Set up a separate mobile site with a separate layout, using a different domain name such as WAP. Or m..

Pros: This layout is easiest for designers and CSS writers, and there are no compatibility issues.

Cons: Obvious, you can’t perform differently depending on the user’s screen size. At present, most portal sites, most of the enterprise’s PC propaganda sites have adopted this layout. A fixed-pixel web page is the easiest way to match a fixed-pixel display. However, this approach is not a fully compatible way to make future web pages, we need some way to adapt to unknown devices.

Liquid Layout

Liquid allows the width of page elements to be adjusted according to screen resolution, but the overall layout remains the same. Masterpiece fence system (grid system).

Use a percentage of the size of the main partition area in the page (used with the min- and Max – attributes), for example, set the width of the main page to 80% and the min-width to 960px. Do the same for the image (width:100%, max-width is generally set to the size of the image itself, to prevent distortion caused by stretching).

1. Layout features

When the screen resolution changes, the size of the elements on the page changes but the layout stays the same. This results in elements not appearing properly if the screen is too large or too small.

2. Design method

The width is defined using % percentages, and the height is mostly fixed with PX, which can be adjusted according to the viewport and the real-time size of the parent element to accommodate as many resolutions as possible. Usually with max-width/min-width and other attributes to control the size flow range to avoid too large or too small impact on reading.

The layout on the Web front end early in the history of the development, to deal with different size of PC screen (at that time the screen size difference is not too big), in today’s mobile development is also a common layout, but obvious disadvantage: the main problem is that if the screen dimension span is too big, so in too small or too large relative to its original design on the screen will not display properly. Because width use % percentage definition, but px height and size and so on are mostly used to fixed, so under the big screen mobile phone display effect will become some of the elements on the page width is pulled very long, but the height, size is the same (that is, these things can’t become the “flow”), showed very not harmonious

Adaptive Layout

Adaptive layouts are characterized by defining layouts for different screen resolutions, that is, creating multiple static layouts, each corresponding to a screen resolution range. Changing the screen resolution allows you to switch between different static parts (the position of the page elements changes), but in each static layout, the page elements do not change as the window size changes. You can think of adaptive layout as a family of static layouts.

1, layout characteristics

When the screen resolution changes, the position of the elements on the page changes without changing their size.

2. Design method

Use @media media query to switch different styles for devices of different sizes and media. Under the excellent response range design can give the best experience to the device within the range, in the same device is actually fixed layout.

Four, Responsive Layout

With the advent of media query technology in CSS3 came the concept of responsive design. Responsive design goal is to ensure that a page on all terminals (PC, mobile phones, watches, of various sizes of refrigerator Web browser, etc.) can show a satisfactory result, for CSS writers, on the implementation is not constrained by specific methods, but often it is a mix the fluid layout + flexible layout, again tie-in use media query technology. Define layouts for different screen resolutions, and apply the idea of streaming layout in each layout, where page element widths automatically adapt to window adjustments. That is, create multiple streaming layouts, one for each screen resolution range. Responsive layout can be thought of as a fusion of the design concepts of streaming layout and adaptive layout.

Responsiveness has almost become the standard for good page layout.

1. Layout features

Each screen resolution has a layout style that changes the position and size of elements.

2. Design method

Media query + streaming layout. Usually use @media media query and Grid System with relative layout units for layout, in fact, is a comprehensive response, flow and other technologies through CSS to a single page to return different styles of different devices technology collectively.

Advantages: Suitable for PC and mobile terminal, if enough patience, perfect effect.

Disadvantages :(1) media query is limited, that is, can be enumerated, can only adapt to the mainstream width and height. (2) It takes a lot of work to match enough screen sizes, and multiple versions of the design are required.

A responsive page will have this code in its header:

<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">Copy the code

5. Flexible layout (REM/EM layout)

  1. Rem/EM difference: REM is relative to the font size of an HTML element, while EM is relative to its parent element.

  2. The use of EM or REM units for relative layout is more flexible than % percentages, and allows for normal display of browser font resizing, zooms, etc., as em is a relative parent element is not promoted. 【 Chinese site making web pages, use CSS enforce a font size, ensure everyone see the effect of a uniform, including these web portal netease, sohu, most of the site, use absolute units px (pixels). However, if from the website usability into consideration, the font size should be variable, However, Internet Explorer, which dominates the browser market, is unable to adjust font sizes that use PX as a unit.

  3. This type of layout is characterized by the fact that the dimensions of the elements surrounding the text are in EM/REM, while the dimensions of the main partition areas of the page are still in percentage or PX (as in “flow layout” or “static/fixed layout”). Early browsers didn’t scale the entire page, only allowing text within the page to be enlarged, in this case. Using em/ REM as a unit, you can scale the element that wraps the text as the text is scaled.

  4. The default font height of the browser is usually 16px, that is, 1em:16px, but the ratio of 1:16 is not easy to calculate. In order to make the unit EM/REM more intuitive, CSS writers often set the font size of the page and node to 62.5%. For example, when choosing REM to control the font, first set the font size of the root node HTML. Because the browser default font size is 16px*62.5%=10px. So one rem is 10px, which makes it easy to calculate.

  5. Another advantage of using EM/REM for sizing is that it is easier to indent/set font size by font unit padding or margin/browser (because EM/REM changes in sync with font size). For example: p{text-indent: 2em; }.

  6. Flexible layouts using REM units are also popular on mobile.

  7. In fact, the use of so-called elastic layout on mobile is relatively reluctant. The reason for the popularity of flexible layouts on mobile devices is that REM units are great for adjusting the size and text size of elements on a page (depending on the screen size). In fact, with up-and-coming units like VW and VH, you can achieve perfect streaming layout (height and text size can be “streaming”), and elastic layout is no longer necessary.

Conclusion 1. Static layout (constant width) is the best choice for PC only. 2. If you are working on mobile devices, and the design does not require high height and element spacing, then elastic layout (REM + JS) is the best choice, a CSS + a JS font size adjustment. 3 if THE PC, mobile compatible, and very high requirements then responsive layout is the best choice, the premise is that the design according to different height and width do different design, responsive according to media query do different layout.

　

Refer to the article: www.cnblogs.com/zhuzhenwei9…