本文来自微信公众号 “毛柒圆记录”，作者:慢慢吃的毛毛虫，纷传经授权发布。

在给B端页面做适配方案时，哪种布局方案更好呢？

一般有5种布局：静态布局、流式布局、自适应布局、响应式布局、弹性布局。

一、静态布局（Static Layout）

简单来说：所有元素宽高都固定，不会随着窗口宽度改变。宽度和高度都使用px作为单位。

注意点：通常设置了最小宽度：min-width，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，常见于pc端。

优点：这种布局方式对设计师和开发来说都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据不同的用户的屏幕尺寸做出不同的适配。

图1：静态布局

二、流式布局（Liquid Layout）

简单来说：页面元素的宽度随屏幕宽度调整而变化，但是布局不会变。

注意点：宽度使用%百分比，高度大多用px来表示。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

优点：在一定范围内，用来应对不同尺寸的PC屏幕，在当今的移动端开发也是常用布局方式。

缺点：如果屏幕尺度跨度太大，在过小或过大的屏幕上不能正常显示。（内容被挤压或者过度拉伸）

因为宽度使用%百分比定义，但是高度和文字大小等是用px来固定，所以在大屏幕显示时，变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调。

图2：流式布局

三、自适应布局（Adaptive Layout）

1、简单来说：就是静态布局的升级版（多个静态布局组成）

2、注意点：分别为不同的屏幕分辨率定义布局。比如小于1280px是一个布局，1280~1920px一个布局，1920px以上一个布局，每个布局的字体大小也会不一样。

每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局（页面元素位置发生改变，字体大小也会变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。

3、优点：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

4、缺点：多套设计稿，多套代码

图3：自适应布局

四、响应式布局（Responsive Layout）

简单来说：一个页面在所有终端上都能适配。

注意点：可以看作流式布局和自适应布局设计理念的融合。

自适应能检测设备，不同的设备采用不同的布局。但是自适应范围内都是一套模板，不会根据设备采用不同的展示样式。所以要加上流式布局：采用一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，展示的方式像水流一样，一部分一部分的加载。不同的分辨率适配不同的样式，页面元素宽度会随着窗口调整而自动适配。

响应式几乎已经成为优秀页面布局的标准。

1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2、设计方法：媒体查询+进阶版流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局

优点：适配pc和移动端，如果足够耐心，效果完美。

缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

图4：响应式布局

五、弹性布局（rem/em布局）

1、简单来说：是一种等比例缩放布局。

它是使用 em 或 rem 单位进行相对布局。使用相对单位，在不同分辨率用同一套代码，字体会自动进行放大缩小。也适合在大屏的情况下使用。

图5：弹性布局

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

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

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

如有不对的地方，欢迎指正交流！

本文由作者授权纷传发布，建圈子、做付费社群用纷传。