概念
viewport -> 视口
layoutviewport -> 布局视口
visualviewport -> 虚拟视口
物理像素 -> 屏幕的真实像素
设备独立像素 -> 操作系统 (广义) 中可以操作控制的像素
设备像素比 -> 物理像素/设备独立像素
ppi -> 每英寸多少个像素 -> 决定物理像素的单位实际大小
rem -> 尺寸单位，根据 html 根节点的 font-size 决定
假设设备像素比大于 1 ， css 中定义的的 1 个像素，就会有多个物理像素来真实渲染在屏幕上。
高清方案实现原理
- Html 引入 js 脚本 -> 根据设备的型号、物理像素比 (dpr) 和屏幕尺寸，动态改写 meta 标签，设置缩放比例，给 html 标签添加 2 个属性，处理后的 dpr 和 font-size ，用于在 css 中描述尺寸时所用的单位。
对 dpr 处理具体内容是 IOS 中对 dpr 设置最大值 3，安卓统一为 1
- 通过 css 处理器 postcss 来改变项目写的样式
- webpack 结合 postcss 以及 postcss 的插件 postcss-px2rem 来把 css 中写的 px 无痛转换为 rem
参考文档: