CSS响应式设计技术综述
1. 前言
响应式设计本质上是属于兼容性问题，任何问题的产生都有个根源，响应式设计问题的根源在于用户设备屏幕尺寸的多样性，网页设计如何应对千变万化的屏幕尺寸，目前已有的响应式设计技术都是为了解决这个问题而诞生的。
2004年，Cameron Adams 在他的一篇博文 Resolution dependent 中提出借助 JavaScript 先探测屏幕分辨率，再根据探测结果加载不同的 CSS 样式表的方案。
2008年，Zoe Mickley Gillenwater 在 她的演讲 中详细描述了几种不同的响应式设计技术。
2009年，Ethan Marcotte 在他的博文 Fluid Grids 第一次提出流式网格的概念。
2010年，Ethan Marcotte 在他的博文 Responsive Web Design 第一次提出响应式设计，并且总结出三类相关技术。
本文以这三类技术为主线，对CSS响应式设计进行一个大概的综述。
2. 媒体查询
首先来看第一类响应式设计技术，媒体查询 (Media Query) 。
媒体查询的目的在于将数量众多的屏幕尺寸分割为几个区间。
在每个不同的区间里，布局设计是完全不同的，每个区间都需要一套新的布局设计和与之对应的样式表。
而在每个区间中，网页的布局是基本相同的，只有一些细微的区别。
用来 分割 这些区间的 特定尺寸点 叫做 断点 (breakpoint)。
3. 自适应
媒体查询用来分割区间，而 自适应 的目的 就是如何使网页在各个区间中面对不同的屏幕尺寸都能适应良好。
比如在一个区间: 320px-480px 中，布局是相同的，但页面上的每个元素的尺寸在不同大小的屏幕中有可能是不同的：
在上图中，我们可以看到布局是相同的，但具体元素的尺寸是不同的。
这就表明我们不能给元素设定固定尺寸，元素的具体尺寸应该根据屏幕的实际大小确定。
为了实现这个目的，所能够采用的技术有：
-
百分比
给元素的尺寸设置百分比，这样元素的实际尺寸大小就是根据父容器的尺寸决定的。
-
相对单位
- rem：rem 相对于
<html>的 font-size ，比如<html>的 font-size 为 16px ，那么 1rem = 16px - em：em 相对于父元素的 font-size
- vw：1vw 等于 视口宽度 (viewport width) 的 1%
- vh：1vh 等于 视口高度 (viewport height) 的 1%
- rem：rem 相对于
4. 响应式图片
上面两类技术勾勒出了响应式设计的基本轮廓，接下来就是一些细节的具体完善，图片就是属于其中一类常见的细节：如何让一张图片也具有响应式变化？
以前的做法是这样的：
img {
max-width: 100%;
display: block;
}
这样做的结果是让图片的大小随着父容器的实际尺寸进行变动：
- 如果容器尺寸超过图片实际尺寸，则图片按照自己的实际尺寸展示；
- 如果容器尺寸小于图片实际尺寸，则图片进行相应缩小来适应容器尺寸。
现在的做法：提供几张不同的图片，让浏览器根据实际情况选择使用哪张图片，实际情况又分别有以下考量：
-
屏幕尺寸和分辨率 （resolution switching problem）
在大尺寸屏幕和高分辨屏幕上提供高分辨率图片，这是OK的。
但是在小尺寸屏幕和分辨率上依然提供高分辨率图片则会浪费流量，因为小屏幕和低分辨率设备不需要分辨率高的图片。
这个时候提供一张分辨率低一点的，文件体积小点的图片是个比较好的选择。
-
用户视觉（art direction problem）
如果根据屏幕尺寸对一张图片单纯进行缩放，有可能会出现以下情况：
在比较宽的屏幕中，图片表现良好
但是当屏幕变窄时，可以看到图片中的人物变小了很难看清，而在这张图片中人物才是图片的主要内容。从用户的角度来看，这个观感体验是不好的。
当屏幕尺寸变窄时，提供一张进行合适裁剪后的图片可以改善这种情况：
以上图片和例子来自于 MDN Responsive images
此时我们对响应式图片进行一个总结：
- 在高分辨率和大尺寸屏幕上提供高分辨率图片
- 在低分辨率和小尺寸屏幕上提供低分辨率图片
- 在小尺寸屏幕上提供根据内容进行裁剪合适的图片
那么有哪些相关技术可以帮助我们实现这些需求呢？
-
svg 图片
矢量图可以进行自由缩放而不丢失精度
-
使用
<img>提供的新属性：srcset和sizes。这两个新属性相当于是给浏览器的 提示 (hint) ，可以让浏览器根据不同的屏幕尺寸下载不同的图片。
<img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">由于本文综述性为主，因此不会对这个技术怎么使用进行详细解释，需要了解的读者可以前往 MDN srcset 和 MDN sizes 查看具体使用方法。
响应式图片的缺点又有哪些呢？
对于每张图片需要提供多个版本，无疑会提高设计和美工的工作量。
实际项目中到底需不需要实现响应式图片取决于实际需求，这里有一个 tradeoff (权衡) 的考量。
5. 响应式排版
前面主要讲了布局，元素尺寸和图片的响应式。
除此之外，还应考虑到每种尺寸区间里，用户的观感体验。
比如在大屏里文字的大小设置为多少比较好，而在小屏里文字的大小设置为多少比较好。
例如这类细节，如果处理得当的话，会大大提高用户的浏览体验。
更多阅读资料
转载自:https://juejin.cn/post/7118548634194411550