响应式设计 Responsive web design
一 、 概念
Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. 响应式网页设计（RWD）是一种网页设计方法，可使网页在各种设备以及窗口或屏幕尺寸上都能很好地呈现。
响应式 VS 自适应
自适应设计（AWD） 一个应用程序使用多版本用户界面，服务器端查询设备信息返回给用户相应的页面。
自适应： 针对不同设备返回不同的页面
响应式： 一套代码，到处运行。维护成本、开发成本较低，方便改动。但需要设计者与开发者考虑更多细节，同时在内容较多的页面对设计样式不好控制。并且代码量更多，可能导致不必要的流量浪费，影响加载速度。
响应式布局解决方案
- 静态布局 使用媒体查询，为不同屏幕定义方案
- 流式布局 页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。
- 弹性布局 使用 flex 布局
屏幕相关
-
物理像素和分辨率
物理像素在屏幕上横向、纵向的分布数量，如 1080 x 1920 在屏幕横向上有1080个物理像素，在屏幕纵向上有1920个物理像素 -
PPI、DPI PPI 是衡量屏幕设备、图片清晰度的指标，PPI 越高，越高清。 PPI(PixelPerInch)：每英寸包括的像素数。 DPI(DotPerInch)：即每英寸包括的点数（像素点、打印机的墨点） 描述图片和屏幕时 PPI 等价于 DPI 。
-
设备独立像素（dp） 实际上，在物理像素较高的设备和较低的设备中，我们看到的屏幕内元素的大小是近似的。 这是因为物理像素较高的设备会将多个物理像素表现成一个，这样元素表现的大小近乎一致，且会更高清。
-
设备像素比 也称dpr，即物理像素和设备独立像素的比值。 如 iPhone6、7、8Plus 物理像素是 1080x1920，设备独立像素是 414x736，设备像素比为 3
-
CSS像素 页面的缩放系数 = CSS像素/设备独立像素 在页面100%时，1px = 1dp
视口
- 布局视口 最顶级的元素基于布局视口来计算（如百分比），布局视口在PC端等于当前浏览器的窗口大小。移动端在不设置网页的 viewport 的情况下布局视口被赋予一个默认值，大部分为 980px。
- 视觉视口 用户通过屏幕真实看到的区域，用户可以通过缩放来查看网页的显示内容，从而改变视觉视口。视觉窗口会影响 CSS 像素跨越的物理像素。
- 理想视口 理想视口既页面在移动端展示的理想大小。 通常我们希望的理想视口是页面缩放比例为100%时的视觉视口， 此时 CSS像素 = 设备独立像素。
二、 设计与原则
同一页面上
- 在不同大小和比例上看起来都应该是舒适的；
- 在不同分辨率上看起来都应该是合理的；
- 在不同操作方式（如鼠标和触屏）下，体验应该是统一的；
- 不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。
屏幕效果上
- 在不同的屏幕，想要同样的效果
- 在更大的屏幕，想要更多的展示
- 在不同的屏幕，想要不同的效果
「移动优先、渐进增强」策略
先行设计移动端的样式，然后再扩展成为PC端样式，因为移动端的样式一般是单栏布局，相对简单。渐进增强为PC端样式，更为平滑。
所以可以先行设计并实现一个基础移动端版本。基础版需确定好整体方案，考虑的兼容设备都能满足基本功能，然后针对性兼容的添加新功能，新特性，逐步拓展应用。
移动优先还有个好处是这样可以不用将所有情况的UI稿设计完成之后再开发，在其他稿完成之前，将布局方案、兼容性处理方案确定，提高开发效率。
统一断点
断点参考 Bootstrap 768 992 1220 bostonglobe 660 960 1200 barackobama 768 960
teamtreehouse 768 960
考虑极端尺寸 需要考虑的尺寸应该在 320 ~ 2000 范围内， 市场上一般移动设备（iPhone SE 为 325）的尺寸在360以上。而PC尺寸大部分在 2000 以下。（iMac 27 为 2560）
三、实现方案
媒体查询 查询屏幕宽度定义不同的 CSS 样式。 如在移动优先方案 先实现基础版本样式，更高宽度的采用媒体查询覆写样式 在项目中根目录下的 style 目录新建一个 mixin 文件，定义好分割点。在项目的 less 文件里使用。
巧用百分比
- 子元素 height、width 百分比相对于 父元素 height、width
- 子元素 top、bottom、left、right 百分比相对于 非static定位 父元素的 width
- 子元素 margin、pading 百分比相对于父元素的 width
使用场景:
- 页面在不同断点下的可交互区域 容器设置百分比 100%，max-width 为最大断点大小。
- 固定长宽比
VW、VH 视觉窗口的宽、高度 使用场景:
- 根元素设置宽度为 100VW, 子元素使用 100%
- Modal 使用视图窗口的高宽
rem适配 rem单位只相对于浏览器的根元素（HTML元素）的 font-size。通过改变 html 上 font-size 的大小，即可改变使用 rem 元素大小。 方案:
- JS 查询屏幕宽度动态改变 font-size
- html font-size 使用 vw 为单位
使用场景:
- 想要在不同移动端设备页面表现的一致
- 页面元素在不同断点下变化的比例相同
图片适配 理论上，位图的每个像素对应在屏幕上使用一个物理像素来渲染，才能达到最佳的显示效果。在 PPI 较高的屏幕上，使用多个物理像素表现成一个时，这些像素的颜色和本来的颜色并不是一样的，而是取近似值，所以会让人感觉模糊。
解决方案：
- 使用 SVG图 缺点：设计SVG较复杂、古老浏览器不支持、高彩色图像的体积会很大
- 使用 PPI 与屏幕相近或更大的的位图 缺点：放大后会失真、不支持动画特效
- 使用 WebP 图片
- 使用srcset、sizes 根据不同 dpi 或屏幕尺寸加载不同图片，对于普通屏幕来说不会浪费流量 （不支持 ie 11）
四、总结
响应式具有维护成本、开发成本较低，灵活、方便改动等优点，但同时又代码量较多，设计样式不好控制等缺点。所以应该在合适的场景下选择使用响应式。
响应式相对灵活，根据不同场景和需求选择不同方案，可基于不同方案的组合，而又不受限于任何一种方案。
