Shulou(Shulou.com)06/01 Report--

This article mainly explains the "html5 adaptive page layout method", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "html5 adaptive page layout method"!

Static layout (Static Layout)

The dimensions of all elements on the page are in px.

1. Layout characteristics

Regardless of the browser size, the page layout is always displayed as it was when the code was originally written.

Regular pc sites are static (fixed width) layout, that is, set min-width, in that case.

If it is less than this width, a scroll bar will appear, and if it is greater than this width, the content will be centered and the background will be added. This design is common with the PC side.

2. Design method

PC: Center layout, all styles use absolute width / height (px), design a Layout, when the width and height of the screen are adjusted, use horizontal and vertical scroll bars to check the masked parts

Mobile devices: set up another mobile website, design a separate layout, and use different domain names such as wap. Or m.

There are two ways of static layout in mobile development:

(1) set width=320 on the viewport meta tag, and each element of the page also uses px as a unit. By dynamically modifying the initial-scale of the tag with JS, the page is scaled proportionally so that it just takes up the entire screen. (see front-end development-rem for web app change)

(2) set content "width=640,user-scalable=no on the viewport meta tag, and each element of the page also uses px as a unit. Because the 640px exceeds the width of the phone, the browser will automatically shrink the page to just full screen.

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

Disadvantages: it is obvious that you cannot perform differently according to the screen size of the user.

At present, most portals and PC promotion sites of most enterprises have adopted this layout. A fixed pixel size web page is the easiest way to match a fixed pixel size display. However, this method is not fully compatible with the future web page production method, We needs some methods to adapt to unknown devices.

2. Streaming layout (Liquid Layout)

The characteristic of streaming layout (Liquid) (also known as "Fluid") is that the width of the page elements is adjusted according to the screen resolution, but the overall layout remains the same.

The percentage of the size of the main divided areas in the web page (with min-* and max-* attributes). For example, set the width of the main body of the page to 80% and the width of the page to 960px. The picture is also treated similarly (width:100%, max-width is generally set to the size of the picture itself to prevent 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 will remain the same. [this causes the element to fail to display properly if the screen is too large or too small]

2. Design method: the width is defined by% percentage, and the height is mostly fixed by px. It can be adjusted according to the real-time size of the visual area (viewport) and the parent element to adapt to various resolutions as much as possible. Often with max-width/min-width and other attributes to control the size of the flow range so as not to be too large or too small to affect reading.

In the early history of Web front-end development, this layout was used to deal with different sizes of PC screens (then the difference in screen size will not be too big), and it is also commonly used in today's mobile development, but it has obvious disadvantages: the main problem is that if the screen scale span is too large, it will not display properly on a screen that is too small or too large relative to its original design. Because the width is defined by% percentage, but the height and text size are mostly fixed by px, so the display effect on the phone with a large screen will be that the width of some page elements will be pulled very long, but the height and text size will be the same as before (that is, these things can not become "streaming"), the display is very incongruous.

3. Adaptive layout (Adaptive Layout)

Adaptive layout is characterized by defining layouts for different screen resolutions, that is, creating multiple static layouts, each static layout corresponding to a screen resolution range. Changing the screen resolution can toggle different static parts (the position of the page element changes), but in each static layout, the page element does not change with the window size. You can think of adaptive layout as a series of static layouts.

1, layout features: when the screen resolution changes, the position of the elements in the page will change but the size will not change.

2. Design method: use @ media media query to switch different styles to devices of different sizes and media. Under the excellent response range design, it can give the best experience to the devices in the adaptive range, and the actual layout is still fixed under the same device.

4. Responsive layout (Responsive Layout)

With the emergence of media query technology in CSS3, the concept of responsive design has emerged. The goal of responsive design is to ensure that a page shows satisfactory results on all terminals (PC, mobile phones, watches, Web browsers of refrigerators, etc.). For CSS writers, the implementation is not rigidly specific, but it is usually a mix of streaming layout + flexible layout, combined with media query technology. -- define layouts for different screen resolutions, and apply the concept of streaming layout in each layout, that is, the width of page elements automatically adapts as the window adjusts. That is, create multiple fluid layouts, each corresponding to a screen resolution range. Responsive layout can be regarded as the integration of streaming layout and adaptive layout design.

Responsiveness has almost become the standard for excellent page layout.

1. Layout features: there will be a layout style below each screen resolution, that is, the location and size of the elements will change.

2. Design method: media query + streaming layout. @ media media query and grid system (Grid System) are usually used for layout in conjunction with relative layout units, which is actually comprehensive response, flow, and so on. The above technologies are collectively referred to as returning different styles to different devices on a single web page through CSS.

Advantages: adapt to pc and mobile, if patient enough, the effect is perfect.

Disadvantages: (1) Media queries are limited, that is, they can be enumerated and can only adapt to the width and height of the mainstream. (2) it takes a lot of work to match enough screen sizes, and multiple versions are needed for the design.

Layouts are defined for different screen resolutions, and in each layout, the concept of streaming layout is applied, that is, the width of page elements adapts automatically as the window adjusts.

Responsive layout can be regarded as the integration of streaming layout and adaptive layout design.

Thank you for your reading, the above is the content of "html5 adaptive page layout method", after the study of this article, I believe you have a deeper understanding of the method of html5 adaptive page layout, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.