1.
Static layout (Static Layout)
is the traditional web design. The size of all elements on the web page uses px as the unit.
HTML5+CSS3 series of courses
Ctrip.com Homepage - Mobile
Responsive Layout Practical Combat Micro Plus Station
Campus Official Website Examination Combat Project
1. Layout features: Regardless of the size of the browser, the layout of the webpage is always displayed according to the layout when the code was originally written. Conventional PC websites are all static (fixed width) layouts, that is, min-width is set, so that 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 pc side.
2. Design method:
PC: Centered layout, all styles use absolute width/height (px), design a Layout, and use the horizontal and vertical scroll bars to view the covered part when the screen width and height are adjusted;
Mobile devices: Create a mobile website separately, design a layout separately, and use different domain names such as wap. or m..
Two ways to use static layout in mobile development: (From: What is the difference between flow layout and responsive web design?)
(1) Set width=320 on the viewport meta tag, and each element of the page also uses px as the unit. By dynamically modifying the initial-scale of the label with JS, the page is scaled proportionally, so that it just occupies the entire screen. (See front-end development - rem of 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 the unit. Since 640px exceeds the width of the mobile phone, the browser will automatically shrink the page to just full screen. ( For details, see content "width=640, user-scalable=no" and then do a fixed-size px design? - front-end development)
Advantages: This layout method is the simplest for designers and CSS writers, and there is no compatibility problem.
Disadvantages: Obvious, that is, it cannot perform differently according to the user's screen size.
At present, most portal websites and most corporate PC publicity sites adopt this layout method. A fixed pixel size web page is the easiest way to match a fixed pixel size display. 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 liquid layout (also called "Fluid") is that the width of page elements is adapted and adjusted according to the screen resolution, but the overall layout remains unchanged. Representative fence system (grid system).
The size of the main divided area in the webpage uses percentages (used with min-*, max-* attributes), for example, set the width of the main body of the webpage to 80%, and the min-width to 960px. The picture is also processed 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 on the page will change but the layout will not change. [This leads to the fact that if the screen is too large or too small, the elements will not be displayed normally]
2. Design method: use % percentage to define the width, and the height is mostly fixed by px, which can be adjusted according to the real-time size of the viewport and parent element, and adapt to various resolutions as much as possible. It is often combined with max-width/min-width and other attributes to control the size flow range so as not to be too large or too small to affect reading.
This layout method was used to deal with different sizes of PC screens in the early history of Web front-end development (the difference in screen size would not be too large at that time), and it is also a common layout method in today's mobile development, but the disadvantages are obvious: mainly The problem with is that if the screen scale span is too large, it will not display properly on screens that are too small or too large for their 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 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 before (i.e., these things can't be "streamed"), the display is very jarring.
3. Adaptive Layout (Adaptive Layout)
is characterized by defining layouts for different screen resolutions, that is, creating multiple static layouts, and each static layout corresponds to a range of screen resolutions. Changing the screen resolution can switch different static parts (the position of the page elements changes), but in each static layout, the page elements do not change with the adjustment of the window size. Think of adaptive layouts as a family 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 for devices of different sizes and media. Under the excellent response range design, the best experience can be given to the devices within the adaptation range, and the actual layout is still fixed under the same device.
4. Responsive Layout
With the emergence of media query technology in CSS3, the concept of responsive design appeared. 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.). The implementation is not limited to specific methods, but it is usually a combination of fluid layout + flexible layout, and then used with media query technology. ——Define layouts for different screen resolutions. At the same time, in each layout, the concept of fluid layout is applied, that is, the width of page elements is automatically adapted as the window is adjusted. That is: Create multiple fluid layouts, each corresponding to a screen resolution range. Think of Responsive Layout 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 + streaming layout. Usually use @media media query and grid system (Grid System) with relative layout units for layout. In fact, it is a general term for technologies that return different styles to different devices on a single webpage through CSS, such as comprehensive responsiveness and flow.
Advantages: Adapt 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 the mainstream width and height. (2) To match enough screen sizes, the workload is not small, and the design also requires multiple versions.
Summarize:
Responsive and self-adaptive are similar in principle. They are both detection devices. Different css are used according to different devices, and css is used in percentages instead of fixed widths. The difference is that responsive templates are used in different It looks different on the device, and the display style will change with the change of the device, but the self-adaptation will not, all the devices look like a set of templates, but the length or the picture becomes smaller, it will not be based on The device adopts different display styles. The flow mode adopts some settings, how to display when the width is greater than a certain amount, and how to display when the width is less than a certain amount, and the display method is the same as the water flow, loading part by part, and static is to use a fixed width. .
Streaming layout is used to solve the compatibility between different resolutions of similar devices (generally, the difference in resolution is less); responsive is used to solve the compatibility problem between different devices and different resolutions (generally refers to PC, Large resolution differences between devices such as tablets, mobile phones, etc.).
How to implement a responsive layout: Tossing responsive layout design, the responsive layout of web pages came into being
5. Flexible layout (rem/em layout)
Reference: What is the difference between fluid layout and responsive web design?
1. The difference between rem and em: rem and em are generated in response to the display of different web font sizes. Among them, em is relative to its parent element, which will bring a lot of inconvenience in actual application; while rem is always relative to the size of html, that is, the root element of the page.
2. Use em or rem units for relative layout, which is more flexible relative to % percentages. At the same time, it can support the normal display of browser font size adjustment and scaling, etc., because em is relative to the parent element and has not been promoted. [When Chinese sites make web pages, they are accustomed to using CSS to define the font size to ensure that everyone sees a consistent effect. Most sites, including portal sites such as Netease and Sohu, use the absolute unit of px (pixels) . However, if you consider the ease of use of the website, the font size should be variable, and some people with poor eyesight need to enlarge the font to see the content of the page clearly. However, IE, which occupies most of the browser market, cannot adjust the font size of those using px as a unit. Foreigners attach great importance to the usability of websites, and quite a few 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 wrapping the text is in em/rem, while the size of the main division area of the page is still in percentage or px (same as "flow layout" or "static/ Fixed Layout"). Early browsers did not support the scaling of the entire page, and only supported the enlargement of the text size in the web page, in this case. Using em/rem as the unit can make the element wrapping the text scale with the scale of the text.
4. The default font height of the browser is generally 16px, that is, 1em:16px, but the ratio of 1:16 is inconvenient to calculate. In order to make the unit em/rem more intuitive, CSS writers often set the page and node fonts to 62.5%. For example, when you choose to use rem to control the font, you need to set the font size of the root node html first, because the default font size of the browser is 16px*62.5%=10px. In this way, 1rem is 10px, which is convenient for calculation.
Set body font-size to 62.5% for Easier em Conversion:
If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).
那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
Because some browsers do not default to 16px, or the user has modified the default font size of the browser (due to factors such as browser resolution, eyesight, habits, etc.). If we set it to 10px, it will definitely affect the effect on these browsers, so it is best to use the default 16 of most users as the base * 62.5% to get the 10px we need.
html {font-size: 62.5%;/ 10 ÷ 16 × 100% = 62.5% /}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/ 2.4 × 10px = 24px /}
If the actual project is set to font-size: 62.5%, there may be problems, because chrome does not support fonts smaller than 12px, and when the calculation is smaller than 12px, it will default to 12px for calculation, resulting in inaccurate em/rem calculations of chrome.
For this phenomenon, you can try to set the html font to 100px, and the body to 16px, so that 0.1rem is 10px, and the body font is still the default size, which does not affect the default font size of elements that have not been set.
5. Another advantage of using em/rem to define the size is that it is more suitable for indentation/padding in font units or margin/browser setting font size (because em/rem will change synchronously relative to the font size). For example: p{ text-indent: 2em; }
6. The flexible layout using rem units is also very popular on the mobile side.
Tool ViewtoREM: PX conversion to REM (automatic preprocessing) 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 in the root element according to our own needs Determine a reference value. The difference between rem, em, and px:
px: pixel, a more accurate unit, but it is not easy to do responsive layout
em: take the font-size of the parent node as a reference point, the standard is not uniform, and it is easy to cause confusion REM supports browsers: Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, IE9+ and Opera11+. IE6-8 cannot support it.
For screens of different sizes, you can uniformly assume that the screen width is 640px before writing CSS (of course you can also assume that the screen width is 320px). At this point, we set the font-size of the html element to 40px (the same, just for example), and then use rem as the unit everywhere (element size, text size), and then use media query or JS to dynamically control it according to the size of the screen The font-size of html elements (under a specific screen size, what value should be set to the font-size of html elements is determined by designers and programmers after repeated consideration when using this solution. Here is a relevant CSS media query code ), which can automatically change the size of all elements whose size is defined by rem (and the calculation process for CSS writers to convert in their minds is much simpler than em).
In fact, View Code
uses the so-called flexible layout on the mobile side, which is relatively reluctant. The reason why the flexible layout of the mobile terminal is popular is that the rem unit is more useful for 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 a perfect fluid layout (height and text size can become "fluid"), and elastic layout is no longer necessary. For details, please refer to: Viewport-related units vw, vh... Introduction and practical application scenarios
The following advantages and disadvantages reference: Responsive design and REM layout comparison (doubtful)
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 adaptive in width, but not adaptive in height. For some designs that require relatively high height or element spacing, this layout does not make much sense. If it is only width adaptive, responsive design is recommended.
A comparison between responsive and elastic layouts:
Responsive layout: Changing the width of the browser will change the "layout" accordingly, and it is not static. For example, the navigation bar is arranged horizontally on a large screen, vertically arranged on a small screen, and hidden as a menu on an ultra-small screen. That is to say, if you have enough patience, there should be a reasonable layout and perfect effect under each screen.
rem layout: Change the width of the browser, and the height and width of all elements on the page will be scaled proportionally, that is, the navigation is horizontal on a large screen, but it is still horizontal on a small screen, but it becomes smaller.
in conclusion:
1. If you only work on the PC side, then static layout (fixed width) is the best choice;
2. If you do it on the mobile side, and the design does not require high height and element spacing, then elastic layout (rem+js) is the best One copy of css + one copy of js to adjust the font-size;
3. If PC and mobile are compatible, and the requirements are high, then responsive layout is still the best choice, provided that the design is designed according to different heights and widths. , Responsively do different layouts according to media queries.