什么是响应式
就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
为什么需要响应式设计
产品形态需要， web 在不同设备下的产品形态存在差异。
访问更快，适应于不同终端，会增加访问量。
像素密度
PPI（Pixels Per Inch）： 英寸所拥有的像素（pixel）数目。
设备像素（device pixel）：显示屏用于呈现不同颜色的最小“点”就是设备像素。
像素密度 ：使用对角线上的设备像素值除以对角线的英寸长度。像素密度中的像素指的是设备像素。
设备像素比 ：在高清设备中，系统分辨率下每个像素等于几个设备像素的比值为设备像素比。
CSS 像素
在写 CSS 用到的单位 PX 是 CSS 像素。它不同于固定、物理的设备像素。 CSS 像素是相对的。CSS 像素默认等于一个设备像素，但在高清设备或者用户缩放的过程中，一个 CSS 像素大于等于多个设备像素。
视口
桌面浏览器的视口
可视宽度大小是布局视口，或者简称视口。桌面视口的特点是浏览器大小受限于显示屏幕大小，也意味着页面不会超过浏览器屏幕大小。而在移动设备却不是这样的。
移动设备浏览器的视口
对于移动设备上的浏览器不是以屏幕尺寸来控制页面的布局渲染。
当使用默认宽度为 980px 的移动设备访问一个页面时，浏览器会做两件事：
- 用 980px 像素渲染页面。
- 将页面缩放与系统宽度一致。
以 320px 渲染页面，缩放比例为 1。
<meta name="viewport" content="width=320, initial-scale=1.0">
无论什么设备，什么持握方式，都使用系统分辨率宽度渲染
<meta name="viewport" content="width=device-width, initial-scale=1.0">
参考
【1】高性能响应式 Web 开发实战 @ 李光毅
若有收获，就点个赞吧
0 人点赞
