响应式是什么
随着人们使用的屏幕尺寸的种类越来越多，出现了响应式网页设计的概念（responsive web design，RWD），RWD 指的是允许 Web 页面适应不同屏幕宽度因素等，进行布局和外观的调整的一系列实践。
产生
很早之前，设计网站时有两种选项：
它会尽量拉伸以填满整个视窗。
固定宽度（左）
液态（右）
不难发现，它们都有各自的缺陷，人们只能尽量在两者之间权衡。
移动端浏览网页的需求出现后，最初只能为PC和移动端单独开发两个版本。此后移动设备的高速发展也为网站设计带来了很多挑战。
Ethan Marcotte首次在2010年提出响应式设计，将其描述为液态网格、液态图像、媒体查询三种技术的混合使用。
可以理解为：利用一些技术，使得同一套代码在多个终端能正常合理地展示，而不是为每个终端写一套代码。
响应式的网站很多，我们先来直观感受一下：dropbox
可以看到，首页在三端呈现出不同的效果，都很和谐：
### 响应式&交互式
这两个词其实没什么联系，这里还是对它们进行了区分：
交互式：根据用户的行为进行相应的变化。
例如：鼠标点击、移动时产生的元素颜色、大小变化；手指拖拽、触摸等。
响应式：根据屏幕和浏览器的不同而显示不同的样式。
例如前面提到的：同一网页在PC和移动端有不同的样式；不同分辨率图片、视频的展示等。
因此，“交互式”是针对用户的，“响应式”是针对设备的。
响应式&自适应
这两个概念很容易混淆。
与响应式相似，自适应也是一种较为灵活的方案，也能根据屏幕大小自动缩放页面元素的大小。但其并不要求适配所有大小的视口，因此针对不同设备，仍需开发不同的页面。
当页面元素较多时，我们无法使用响应式时，就常常用到自适应。例如京东这类电商网站，为了更好的用户体验，就会直接分开设计。
## 如何实现
媒介查询
响应式布局的核心是媒介查询或媒体查询：
它允许我们运行一系列测试，例如用户的屏幕是否大于某个宽度或者某个分辨率，并将 CSS 选择性地适应用户的需要应用在样式化页面上。
首先，我们会在html中设置好媒体查询相关的标签，前端的小伙伴很熟悉了：
1 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> |
然后在css中设置尺寸的“断点”，编写具体的样式代码。
例如下面一段代码实现了在不同尺寸的屏幕下展示不同大小的字体，注意后者会覆盖前者：
1 | @media screen and (max-width: 1024px)}@media screen and (max-width: 720px)}@media screen and (max-width: 480px)} |
这些尺寸断点往往是根据常用屏幕的尺寸得到的。
可以看到，有了媒体查询这项技术，我们就能对不同尺寸区间的屏幕自定义样式了。
布局基础
接下来补充一些布局相关的知识。就不再局限于响应式了，与自适应等其它布局方案也有联系。
各种像素
物理像素
显示屏的物理像素点在出厂后就固定不变了。
通常所说的屏幕分辨率就是指物理像素。
设备独立像素
相对单位。
又称为逻辑像素。
CSS像素
前端在CSS代码中写的px都对应CSS像素。
在不缩放的情况下，一个CSS像素就对应一个逻辑像素。
设备像素比
简称dpr：device pixel ratio
物理像素/逻辑像素。
将样式渲染到屏幕时，设备会根据dpr和缩放情况，将CSS像素换算成实际的物理像素。
常用布局单位
%
百分比，需要考虑定位等。
px
css像素。
vh/vw
视窗相关单位。
视窗宽度为100vw，高度为100vh。
vmax,vmin分别表示max(vh, vw)和min(vh, vw)。
rpx
微信小程序中的单位，一般是将宽度定为750rpx，也即750rpx == 100vw。
em/rem
两者都是相对尺寸，它们的区别是：em是相对于父元素的font-size，而rem是相对于根元素的font-size。
使用rem布局时常用一些方便的转换工具，将px单位转换为对应的rem尺寸。
一些前端喜欢用设计导出的pxcook文件，一个重要原因是它的单位自动转换十分方便，减少了样式计算工作量。
移动端1px问题
这里提到的移动端1px问题指的是：前端按照设计稿，编写代码时指定了边距为1px，但在一些移动端浏览器上实际呈现出来的线更粗。（能被设计一眼发现并逮住）
分析
由以上像素相关知识可得：一般情况下设计稿的1px与设备的1px并不等同。
前端代码中如果设置的是1px的CSS像素，在移动端会渲染为两个物理像素，因此会更粗一点。
那么代码中直接改写0.5px可以解决吗？也不一定，在安卓系统下就不能兼容。
该问题的解决方案有很多，这里就不展开讲了，反正锅给前端。
用例
响应式图片
官方定义是：在不同的屏幕尺寸和分辨率的设备上，都能良好工作以及其他特性的图片。
展示问题
在不同尺寸设备上，我们可以通过使用不同的图片，达到更好的效果，举个官方例子。
某示例网站在宽屏上展示效果如下：
而非响应式图片（左）和响应式图片（右）在窄屏上的展示效果对比如下，此时适用于PC端的图片在移动端已经不再合适，左图的人物过于狭小。
#### 分辨率切换问题
响应式图片不光是设计问题，一定情况下还能减少带宽的浪费。
例如，在小屏幕手机上显示网页，就没有必要嵌入分辨率大的图片。因此，我们可以根据不同设备，提供不同分辨率的图片和不同尺寸的图片。
实现
前端具体实现时，会用到图片的srcset和sizes属性，也是根据媒体条件例如(max-width:480px)来选择对应的图片。
评估
最后，我们总结评估一下响应式方案存在的优缺点。
优点
- 跨平台
- 最重要的特点。
- 减小开发成本
- 一套代码多端使用。
- 一致性较强
- 不同终端展示内容相似。
缺点
- 局限性
- 设计时考虑了不同的设备，那就必然受限。一些复杂场景下无法使用该方案。
- 影响加载速度
- 可能增加了代码量等。
总而言之，布局有着不同的方案，并不绝对，日常就按需组合使用吧。
参考文档
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design
https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images