响应式、自适应和流体布局

基础概念：RWD vs AWD

1. 自适应布局（AWD，Adaptive Web Design），会有多个 “.css” 文件来描述布局，并且需要借助 JavaScript判断视窗大小，在不同条件下引用不同的 CSS文件。
2. 响应式布局（RWD，Responsive Web Design），通过 CSS媒体查询来判断，在不同条件下运用不同的 CSS 样式规则，使用流体布局，即使用百分比。

没有正确或错误的做法，需要用什么样的布局让内容来决定。

响应式网页设计的基本原则

流动

内容可以流动

相对单位

使用相对单位，例如百分比（%）rem em

断点

视窗尺寸的断点，小于或者大于某个断点的时候改变排布的列数，下图是常用的断点。


甚至还有断点生成器

嵌套对象

移动或桌面优先

根据实际情况选择移动或是桌面优先

如何进行响应式布局

内容区块的适配：使用最大值最小值

两种解决方案：

1. 内容区域定宽：是指内容区域在每一组视窗宽度区间内，都会设定一个最大值（Max-with），当内容区域宽度小于最大值时，区域内元素会响应视窗的变化；达到最大值后，内容区域不再响应视窗的变化，而是宽度保持该最大宽度值不变，此时我们通过增加页面两侧的 margin 值来响应视窗的变化。
2. 内容区域宽度流式：它的内容区域 (Container) 距离页面两侧的页边距Margin是定值，因此视窗有多大内容区域就展示多大。

内容区域定宽示例：ones官网

使用个性字体

使用特有的字体，下载需要时间，会影响网页的加载速度，所以最好考量一下。

解决字体大小适配

CSS锁的概念

CSS锁允许你设置最小和最大的字体大小。最小字体大小将应用于最小视窗宽度以下，最大字体大小将应用于最大视窗宽度之上，在最小宽度和最大宽度之间，字体大小将按比例从最小字体到最大字体间按一定的比例缩放。

CSS锁的核心：calc()函数

可以使用calc()函数给元素属性设置动态值。
calc()函数使用加 （+）、减（-）、乘（*）、除（/）进行运算

font-size: calc([minf]px + ([maxf] - [minf]) * ( (100vw - [minw]px) / ([maxw] - [minw]) ));

• minf：最小字号
• maxf：最大字号
• minw：视窗最小宽度（断点1）
• maxw：视窗最大宽度（断点2）

  解决文本排版问题

  根据不同分辨率自动显示/隐藏文本内容

解决图片适配

使用位图还是矢量图

如果有奇特的效果：使用位图
如果没有：使用矢量图

图片宽度的调整，等比放大缩小

使用object-fit，表示图片在所定义的大小的裁剪。

.imgbox{
width:400px;
height:180px;
object-fit:cover;
}

根据页面尺寸自动折叠导航和菜单

[

](https://www.w3cplus.com/)

参考文章

1. 什么是响应式布局回答
2. 什么是响应式布局回答
3. 响应式网页设计的9个基本原则
4. 给CSS加把锁
5. CSS3的calc()使用
6. 后台系统设计中栅格系统的应用（响应式设计）