CSS layout static layout, adaptive layout, fluid layout, responsive layout, flexible layout

(Recommended tutorial: CSS video tutorial)

Static Layout

In traditional web design, the size of all elements on the web page uses px as the unit.

1. Layout characteristics: 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:

• PC: Centered layout, all styles use absolute width/height (px), design a Layout, when the screen width and height are adjusted , use the horizontal and vertical scroll bars to view the obscured parts;

• Mobile devices: Create a mobile website in addition, design a separate layout, 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) in Set width=320 on the viewport meta tag, and each element of the page also uses px as the unit. By using JS to dynamically modify the initial-scale of the label, the page is scaled proportionally so that it just fills the entire screen. (See front-end development - web app change rem)

(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, and the browser will automatically shrink the page to just full screen. (For details, see content "width=640,user-scalable=no" and then carry out a fixed-size px design? - Front-end development)

• Advantages: This layout method is the simplest for designers and CSS writers, and there are no compatibility issues.

• Disadvantages: Obvious, that is 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 a fixed pixel size display. But this method is not a fully compatible way to make future web pages. We need some way to adapt to unknown devices.

Streaming Layout (Liquid Layout)

The characteristic of Liquid Layout (also called "Fluid") is that the width of page elements is adjusted according to the screen resolution, but the overall layout does not Change. Represented as a fence system (grid system).

Use percentages for the size of the main divided areas in the web page (used with min-*, max-* attributes), for example, set the width of the main body of the web page to 80% , min-width is 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: screen When the resolution changes, the size of the elements on the page will change but the layout will not change. [This will cause the elements to not be displayed properly if the screen is too large or too small]

2. Design method: use % percentage The width and height are mostly fixed in px, which can be adjusted according to the real-time size of the viewport and the parent element to adapt to various resolutions as much as possible. It is often controlled with attributes such as max-width/min-width. The size flow range is to avoid being too large or too small to affect reading.

This layout method was used in the early history of Web front-end development to cope with PC screens of different sizes (the difference in screen size at that time was not too big ) is also a commonly used layout method in today's mobile development, but its shortcomings are obvious: the main problem is that if the screen size 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 of the width Use % percentage definition, but the height and text size are mostly fixed in 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 made "flowy") and the display is very jarring.

Adaptive Layout (Adaptive Layout)

The characteristic of adaptive layout is to define layouts for different screen resolutions, that is, to create multiple A static layout, each static layout corresponds to a screen resolution range. 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 as the window size is adjusted. Adaptive layout can be thought of 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 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.

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 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 is usually a combination of fluid layout, flexible layout, and use of 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 excellent 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 and flow layout. Usually @media media query and Grid System are used in conjunction with relative layout units for layout. In fact, it is a collective name for the technology that combines the above technologies such as responsiveness and fluidity to return different styles to a single web page for different devices through CSS.

• Advantages: Adapted to PC and mobile terminals, if you are patient enough, the effect is perfect

• Disadvantages: (1) Media queries are limited, and It 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.

Responsive pages will add this piece of code in the header:

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

Summary:

Responsive and automatic The principle of adaptation is similar. They all detect devices. Different css are used according to different devices, and the css is based on percentages instead of fixed widths. The difference is that responsive templates look different on different devices. They are different. The display style will change as the device changes, but adaptive will not. All devices will look like a set of templates, but the length or pictures will become smaller. Different templates will not be used depending on the device. For the display style, the flow style uses some settings, how to display when the width is greater than a certain amount, and how to display when it is less than a certain amount, and the display method is the same as the water flow, loading part by part, while the static one uses a fixed width.

Flow layout is used to solve the compatibility between similar devices with different resolutions (generally there are less differences in resolutions); responsive layout is used to solve the compatibility problem between different devices with different resolutions. (Generally refers to the large resolution difference between PCs, tablets, mobile phones and other devices).

How to implement responsive layout: Toss in responsive layout design, and the responsive layout of web pages emerges

Flexible layout (rem/em layout)

Reference: What is the difference between flow layout and responsive web design?

1. The difference between rem and em: rem and em are produced to adapt to the display of different web page font sizes. Among them, em is relative to its parent element, which will cause a lot of inconvenience in practical applications; and 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, which is more flexible relative to % percentage. At the same time, it can support the normal display of browser font size adjustment and scaling. Because em is a relative parent element, it is not obtained. promotion. [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/rem units, while the size of the main divided areas of the page is still in percentage or px units (same as "flow style" Layout" or "Static/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/rem as the unit allows the element wrapping the text to scale as the text scales.

4、浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。

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;}呢？

因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。

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*/}

实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。

针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。

5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }

6、使用rem单位的弹性布局在移动端也很受欢迎。

工具ViewtoREM：PX转换到REM（自动预处理）

rem的定义：font size of the root element，rem是相对于根元素来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。

rem与em、px的区别：

• px：像素，比较精确的单位，但不好做响应式布局

• em：以父节点font-size大小为参考点，标准不统一，容易造成混乱

• REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。

对于不同尺寸的屏幕，可以统一假设屏幕宽度为640px后编写CSS（当然你也可以假定统一为320px）。此时，我们设定html元素的font-size为40px（同样，只是举例），然后各处（元素尺寸、文字大小）使用rem作为单位，随后搭配媒体查询或JS，根据屏幕的大小来动态控制html元素的font-size（特定屏幕尺寸下，html元素的font-size应当设置为何值，是使用这个方案时设计师和程序员需要反复考虑后确定的，以下试举一段相关的CSS媒体查询代码），即可自动改变所有用rem定义尺寸的元素的大小（且CSS编写者在脑中进行换算的计算过程比em简单得多）。

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; 
    }
}

其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局（高度和文字大小都可以变得“流式”），弹性布局就不再必要了。详细可参考：视区相关单位vw, vh…简介以及可实际应用场景

以下优缺点参考：响应式设计和REM布局的对比（有疑问）

• 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。

• 缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。

响应式和弹性布局之间的对比：

响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。

rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

结论：

1.如果只做pc端，那么静态布局（定宽度）是最好的选择；

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. One part css and one part js to adjust the font-size;

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 makes different designs according to different heights and widths, and the responsive layout makes different layouts according to media queries.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of CSS layout static layout, adaptive layout, fluid layout, responsive layout, flexible layout. For more information, please follow other related articles on the PHP Chinese website!