A static layout (static layout)
Namely the traditional Web design, size for all elements on the page Always use px as a unit.
1, the layout features
Regardless of the size of the browser specifically how much, always in accordance with the page layout of the original layout when writing code to display. Conventional pc websites are static (fixed width) layout, which is set min-width, so, if this is less than the width of the scroll bar will appear, if the content is greater than the width of the center plus the background, this design is common in the pc.
2, the design method
PC: center layout, all style uses absolute width / height (PX), a design Layout, when the screen width and height adjust, using the horizontal and vertical scroll bar Now obscured portion;
The mobile device: create another mobile site, a single design of a layout, such as the use of different domain names or wap m ...
Pros: This CSS layout designers and writers who are the most simple, is also no compatibility issues.
Cons: Obviously, that is not to make a different performance depending on the screen size of the user. Currently, most of the portals, most PC companies have adopted this propaganda site layout. Fixed pixel size of the page is the easiest way to fix the pixel size of the display to match. However, this method is not a method for manufacturing fully compatible with the future of the web page, we need some way to adapt to an unknown device.
Second, the flow layout (Liquid Layout)
Fluid layout (Liquid) features (also called "Fluid") is the width of the page elements adapting adjusted in accordance with the screen resolution, but the overall layout of the same. Fence representative system (grid system).
The size of the main page using the divided area percentages (with min - *, max- * use properties), e.g., a width of the main web provided 80%, min-width of 960px. Similar images can also be processed (width: 100%, max-width is generally set to the size of the image itself, to prevent stretching and distortion).
1. Layout Features
When the screen resolution changes, the page will change in size but the layout elements and unchanged. This leads to [If the screen is too big or too small can cause elements not display properly.
2. Design Method
% Percent is defined using the width, height mostly be secured by px, real time can be adjusted according to the size of the visible area (the viewport) and a parent element, to adapt to various resolutions possible. Often with the max-width / min-width attributes such as size of the flow control range in order to avoid too large or too small to affect the reading.
This layout on the early history of the Web front-end development, to respond to different sizes of PC screen (when the screen size difference is not too large), the mobile terminal development today is also a common layout, but the disadvantage is obvious: the main can not be shown on the screen if the problem is the scale span is too large, then relative to its original design is too small or too large screens. Because the width defined using the% percentage, but the height and size for text mostly fixed with px, so the display will turn some page elements pulled a long width in the large-screen mobile phone, but the height and size of the text or original Like (that is, these things can not become "streaming"), displayed very uncoordinated
Third, an adaptive layout (Adaptive Layout)
Characteristics of adaptive layout respectively different resolution screen definition layout, i.e., to create a plurality of static layout, each corresponding to a static layout screen resolutions. Change screen resolution may switch to a different static local (page element position change), but in each static layout, the page elements to resize the window with no changes. Adaptive layout can be viewed as a series of static layout.
1, the layout features
When the screen resolution changes, the position of page elements which will change the size does not change.
2, the design method
Use @media media queries to different switching devices of different sizes and styles of media. The best possible experience excellent response to a range within the design range of the adapter device, the actual or fixed equipment in the same layout.
Fourth, responsive layout (Responsive Layout)
With the emergence of CSS3 media queries technologies, and the emergence of the concept of responsive design. Responsive design goal is to ensure that a page can show satisfactory results on all terminals (various sizes of PC, mobile phones, watches, refrigerators, Web browser, etc.), for CSS writers, in not rigidly adhere to achieve the specific techniques, but is usually a blend of flow layout + elastic layout, then with media query techniques. - each different screen resolution is defined as the layout, while, in each layout, the layout concept by flow, i.e. the width of the page elements as the window is adapted to adjust automatically. Namely: creating a plurality of fluid layout, a corresponding screen resolutions. The response can be viewed as a fusion layout flow layout and design of an adaptive layout.
Responsive has almost become an excellent standard page layout.
1. Layout Features
Here there will be a resolution of each screen layout styles, i.e., position and size of the element will change.
2. Design Method
Media Inquiries + flow layout. @Media queries and media commonly used grid system (Grid System) with the relative layout unit layout, comprehensive responsive fact, the flow returns technology and other techniques described above are collectively referred to different styles of a single page by different devices CSS.
Pros: adapt pc and mobile end, if patient enough, the effect is perfect.
Disadvantages: (1) media query is limited, that is, can be enumerated, can only adapt to the mainstream width and height. (2) enough to match the screen size, the workload is not small, the design also requires multiple versions.
Responsive page in the head will add this piece of code:
Fifth, the elastic arrangement (rem / em layout)
1. rem / em difference: rem terms relative to the html element size font-size, and em is relative to its parent element.
2. Use em or rem units relative placement relative percentages% more flexible, and can support the browser's font sizing and scaling of the normal display, the reason is because the relative em parent element has not been promoted. [China web site produced when the practice of using CSS to force custom font size to ensure everyone sees the same effect, including Netease, Sohu portal Most of these sites, are used in absolute units px (pixels) . However, if you consider the ease of use of the website, the font size should be variable, some of the vision is not so good people need to enlarge the font can see rightly page content. However, occupy most of the browser market, IE can not adjust the font size that use px as a unit. Foreigners attach great importance to the ease of use of the site, a considerable number of foreign sites have been used as a font em units.
3. The characteristics of this type of layout is that the size of each element wrap text using em / rem do units, while the size of the divided region of the main page still do use a percentage or px units (with "flow layout" or "static / fixed layout"). Early browser does not support full page scaling, zoom only supports in-page text size in this case. Use em / rem do units, the elements can wrap text zoom with text and scaling.
4. The browser's default font height is generally 16px, namely 1em: 16px, but not convenient to calculate the ratio of 1:16, in order to make the unit em / rem more intuitive, CSS writers often a page with node font to 62.5% For example, select a font rem control, first you need to set the font size of the root html, because the browser default font size 16px * 62.5% = 10px. Such 1rem is 10px, to facilitate the calculation.
5. EM / rem Another benefit is better adapted to define the dimensions of indentation / or padding margin in font units / browser settings and the like where the font size (since the EM / rem with respect to the font size is easily changed). For example: p {text-indent: 2em;}.
6. rem elastic unit layout is also very popular in the mobile terminal.
7. In fact, the use of so-called elastic layout in the mobile terminal, is more reluctant. The mobile end of the elastic reason popular layout is ultimately for rem units (according to the screen size) of each element to adjust the size of the page, when the character size relatively easy. In fact, the use of vw, vh other rising star of the unit, you can achieve the perfect flow layout (height and text size can become "streaming"), flexible layout is no longer necessary.
in conclusion
1. If only the pc, then the static layout (fixed width) is the best choice;
2. If the mobile terminal to do, and the design height and spacing elements than needed, the elastic arrangement (rem + js) is the best choice, a css + js adjusting a font-size get;
3. If the pc, to be compatible with mobile and demanding so responsive layout is the best option, provided that the different designs depending on the aspect do different design, responsive layout based on the query do different media.