What we call the layout method here usually refers to the changes in width and height under different page conditions.
Common page layouts include
- Static layout (px layout means that its height and width are fixed. No matter how the page is zoomed in or out, it still occupies the height and width fixed by px)
- Liquid Layout uses the percentage (100%) of the main divided area size (used with the min-* and max-* attributes)
- Adaptive Layout (Adaptive Layout-Media Query Layout) means creating multiple static layouts, each static layout corresponding to a screen resolution range
- Responsive Layout detects window size using bootstrap layout
- Flexible layout (rem/em layout) css3 rem
1. Static Layout
That is, in traditional web design, the size of all elements on the web page uses px as the unit.
1- The layout characteristics are as follows:
No matter what the browser size is, the layout of the web page is always displayed according to the layout when the code was originally written. Conventional PC websites are all static (fixed width) layout, that is, min-width is set. In this case, if the width is smaller than this width, a scroll bar will appear. If it is larger than this width, the content will be centered and the background will be added. This kind of design is common with pc side.
2-Design method:
(1) PC side: The width and height of the web page are fixed. No matter which browser it is on, the size written by the developer in the CSS is displayed. When the page window becomes smaller, the covered part will It will be displayed by scrolling the scroll bar. Use the horizontal and vertical scroll bars to view the obscured part;.
(2) Static layout for mobile terminals: Create a separate website, design a separate layout, and use different domain names.
Here we have two main ways of static layout on the mobile side: [Flowing layout; Responsive layout]
1. Set width = 320 on the viewport meta tag. Each element of the page also uses px as the unit. Dynamically modify the initial-scale of the tag through js so that the entire page is scaled so that it just fills the entire screen.
2. Set content "width=640, user-scalable=no" on the viewport meta tag. Each element of the page also uses px as the unit. Since 640px exceeds the width of the mobile phone, the browser will automatically shrink to the full screen of the page.
Advantages: This layout method is the simplest for designers and CSS writers, and there are no compatibility issues.
Disadvantages: Obviously, it cannot perform differently according to the user's screen size.
Currently, most portal websites and most corporate PC promotion sites adopt this layout method. Fixed pixel size web pages are the easiest way to match fixed pixel size displays. But this method is not a fully compatible production method for future web pages. We need some methods to adapt to unknown devices.
2. Liquid Layout
The characteristic of fluid layout is that the width of page elements is moderately adjusted according to the screen resolution, but the overall layout remains unchanged. The main thing is to use percentages for the size of the main areas of the page; represented by the fence system (grid system).
Use percentages for the size of the main divided areas in the web page (used with the min-* and max-* attributes). For example, set the width of the main body of the web page to 80% and min-width to 960px. Images are also processed similarly (width: 100%, max-width is generally set to the size of the image itself to prevent it from being stretched and distorted).
1. Layout characteristics : When the screen resolution changes, the size of the elements on the page will change but the layout will not change. [This means that if the screen is too large or too small, the elements will not be displayed properly]
2. Design method : Use % percentage to define the width, and the height is mostly fixed in 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. Properties such as max-width/min-width are often used to control the size flow range to avoid being too large or too small and affecting reading.
In the early history of Web front-end development, this layout method was used to cope with PC screens of different sizes (the difference in screen size was not too big at that time). It is also a commonly used layout method in today's mobile development, but its shortcomings are obvious: the main The 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 for its original design . Because the width is defined using %, but the height and text size are mostly fixed in px, the display effect on a large-screen mobile phone will become that the width of some page elements is stretched very long, but the height and text size are still the same as the original ones. same (i.e., these things can't be made "fluid"), the display is very jarring.
That is, by displaying the width as one hundred percent, it can be implemented under different screen resolutions, and the size of the layout can be changed.
3. Adaptive layout
The characteristic of adaptive is to define layouts for different screen resolutions and create multiple static layouts. Each static layout corresponds to a screen resolution, that is, when the screen width is different, the corresponding static layout is displayed. In this way, the elements of the page do not change with the window size, but change their position.
That is, the left column is fixed and the right is adaptive, or the left and right are fixed and the middle is adaptive. Use the float:left method. When calculating the width and height without fixed, use calc() to calculate 1.
Layout features: When the screen resolution changes, the elements in the page will The position changes but the size does not.
2. Design method: Use @media media query to switch different styles for devices of different sizes and media. With excellent response range design, the best experience can be given to devices within the adaptation range, and the layout is actually still fixed on the same device.
With the emergence of media query technology in CSS3, the concept of responsive design emerged. The goal of responsive design is to ensure that a page can display satisfactory results on all terminals (PCs of various sizes, mobile phones, watches, refrigerator web browsers, etc.). For CSS writers, The implementation is not limited to specific techniques, but it usually combines fluid layout + flexible layout, and then uses media query technology.
4. Responsive Layout) [also called media query layout]
The goal of responsive design is to ensure that a page can display satisfactory results on all terminals (PCs of various sizes, mobile phones, watches, refrigerator web browsers, etc.). For CSS writers, The implementation is not limited to specific techniques, but it usually combines fluid layout + flexible layout, and then uses media query technology. ——Define layouts for different screen resolutions respectively, and at the same time, in each layout, apply the concept of fluid layout, that is, the width of page elements automatically adapts as the window is adjusted. That is: Create multiple fluid layouts, each corresponding to a range of screen resolutions. Responsive layout can be seen as a fusion of fluid layout and adaptive layout design concepts.
Responsiveness has almost become the standard for good page layout.
1. Layout features: There will be a layout style under each screen resolution, that is, the position and size of elements will change.
2. Design method: media query + flow layout. Usually @media media query and Grid System are used to coordinate with relative layout units for layout. In fact, it is a collective name for the technology that combines responsiveness, flow and other above-mentioned technologies to return different styles to a single web page for different devices through CSS.
Advantages: Adaptable to PC and mobile terminals, if you are patient enough, the effect will be perfect
Disadvantages: (1) Media queries are limited, that is, they can be enumerated and can only adapt to mainstream width and height. (2) To match enough screen sizes, the workload is not small, and the design also requires multiple versions.
Chestnut: Here is a piece of relevant CSS media query code:
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}
5. Flexible layout (rem/em layout)
1. The difference between rem and em: em is relative to its parent element, which will cause a lot of inconvenience in practical applications; rem is always relative to the size of html, which is the root element of the page.
2. Use em or rem units for relative layout . The relative percentage will be more flexible and can support normal display such as browser font size adjustment and scaling. Because em is a relative parent element, it has not been promoted. [When Chinese websites create web pages, they are accustomed to using CSS to forcefully define the font size to ensure that everyone sees the same effect. Most sites, including portals such as NetEase and Sohu, use the absolute unit px (pixel). . However, if we consider the usability of the website, the font size should be variable. Some people with poor eyesight need to enlarge the font to see the page content clearly. However, IE, which occupies most of the browser market, cannot adjust the font size that uses px as the unit. Foreign people attach great importance to the ease of use of websites, and a considerable number of foreign websites have already used em as the font unit.
3. The characteristic of this type of layout is that the size of each element that wraps the text is in em units, while the size of the main divided areas of the page is still in percentage or px units (same as "fluid layout" or "fixed layout"). Early browsers do not support proportional scaling of the entire page , but only support the enlargement of the text size within the web page, in this case. Using em as the unit allows the element wrapping the text to scale as the text scales. At that time, in order to make the unit em more intuitive, CSS writers often set the font-size of the body element to 62.5% (the browser's default font size is 16px*62.5%=10px), so that 1em is 10px, which facilitates calculation. Another reason to use flex layout on PC (perhaps the only reason today in 2016)
4. Flexible layout using rem units is also very popular on the mobile side . For screens of different sizes, you can write CSS assuming that the screen width is 640px (this is just an example. Of course, you can also assume that it is 320px). At this time, we set the font-size of the html element to 40px (again, just an example), and then use rem as the unit everywhere (element size, text size), and then use media queries or JS to dynamically control it according to the size of the screen The font-size of the html element (under a specific screen size, what value the font-size of the html element should be set to is determined by designers and programmers after repeated consideration when using this solution. Here is a piece of relevant CSS media query code ), you can automatically change the size of all elements whose size is defined with rem (and the conversion calculation process in the mind of CSS writers is much simpler than em).
5. Flexible layout using rem units is also very popular on the mobile side.
Tool ViewtoREM: Convert PX to REM (automatic preprocessing)
The definition of rem: font size of the root element, rem sets the font size relative to the root element , which means that we only need to set the font size on the root element according to our own needs Determine a reference value .
The difference between rem, em, and px:
px: pixel, a relatively accurate unit, but it is not easy to do responsive layout.
em: uses the font-size size of the parent node as the reference point. The standard is not unified and can easily cause confusion.
Browsers supported by rem: Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, IE9+ and Opera11+. IE6-8 cannot support it.
For screens of different sizes, you can write CSS assuming the screen width is 640px (of course you can also assume it is 320px). At this time, we set the font-size of the html element to 40px (again, just an example), and then use rem as the unit everywhere (element size, text size), and then use media queries or JS to dynamically control it according to the size of the screen The font-size of the html element (under a specific screen size, what value the font-size of the html element should be set to is determined by designers and programmers after repeated consideration when using this solution. Here is a piece of relevant CSS media query code ), you can automatically change the size of all elements whose size is defined with rem (and the conversion calculation process in the mind of CSS writers is much simpler than em).
View Code
In fact, it is relatively reluctant to use the so-called flexible layout on the mobile terminal. The reason why mobile flexible layout is popular is that the rem unit is easier to use when adjusting the size and text size of each element of the page (according to the screen size) **. In fact, using up-and-coming units such as vw and vh can achieve perfect fluid layout (both height and text size can become "fluid"), and flexible layout is no longer necessary. For details, please refer to: Introduction to viewport related units vw, vh... and practical application scenarios
Reference to the following advantages and disadvantages: Comparison between responsive design and REM layout (if you have questions)
Advantages: The ideal state is that the aspect ratio of all screens is the same as the original design aspect ratio, or similar, and perfectly adapted.
Disadvantages: This kind of rem+js is only width-adaptive, but height is not adaptive. For some designs that have relatively high height or element spacing requirements, this layout does not make much sense. If only the width is adaptive, responsive design is more recommended.
Comparison between responsive and elastic layout:
Responsive layout: When the browser width is changed, the "layout" will change accordingly and is not static. For example, the navigation bar is horizontal on a large screen, vertical on a small screen, and hidden as a menu on an ultra-small screen. That is to say, if you have enough patience, you should have a reasonable layout and perfect effect on every screen.
rem layout: Change the browser width, and the height and width of all elements on the page will be scaled in equal proportions. That is, the navigation will be horizontal on a large screen, but it will still be horizontal on a small screen, but it will become smaller.
Summarize:
in conclusion:
1. If you only do the PC side , then static layout (fixed width) is the best choice;
2. If you are working on a mobile terminal and the design does not have high requirements for height and element spacing, then flexible layout (rem+js) is the best choice . Just adjust the font-size with one part of css and one part of js;
3. If PC and mobile compatibility are required , and the requirements are very high, then responsive layout is still the best choice. The premise is that the design will be designed differently according to different heights and widths, and the responsive layout will be different based on media queries .