移动端适配|viewport
CSS像素和设备独立像素
在 CSS 中使用的 px 都是指 css 像素，比如 width: 128px。css 像素的大小是很容易变化的，当我们缩放页面的时候，元素的 css 像素数量不会改变，改变的只是每个 css 像素的大小。也就是说 width: 128px 的元素在缩放200% 以后，宽度依然是 128 个 css 像素，只不过每个 css 像素的宽度和高度变为原来的两倍。如果原本元素宽度为 128 个设备独立像素，那么缩放 200% 以后元素宽度为 256 个设备独立像素。
（1）css 像素与设备独立像素的关系
- 缩放比例就是 css 像素边长/设备独立像素边长；
- 在缩放比例为 100% 的情况下，1 个 css 像素大小等于 1 个设备独立像素；
- 在缩放比例为 200% 的情况下，1 个 css 像素大小等于 (2 * 2) 个设备独立像素；
视口
一般我们所说的视口共包括三种：布局视口、视觉视口和理想视口
布局视口(layout viewport)：
布局视口是网页布局的基准窗口，在PC浏览器上，布局视口就等于当前浏览器的窗口大小
document.documentElement.clientWidth / clientHeight来获取布局视口大小。
视觉视口(visual viewport)：用户通过屏幕真实看到的区域。
例如：用户将浏览器窗口放大了200%，这时浏览器窗口中的CSS像素会随着视觉视口的放大而放大，这时一个CSS像素会跨越更多的物理像素。
所以，布局视口会限制你的CSS布局而视觉视口决定用户具体能看到什么。
通过调用window.innerWidth / innerHeight来获取视觉视口大小。
理想视口(ideal viewport
网站页面在移动端展示的理想大小。
页面的缩放系数 = 理想视口宽度 / 视觉视口宽度
当页面缩放比例为100%时，CSS像素 = 设备独立像素，理想视口 = 视觉视口。
通过调用screen.width / height来获取理想视口大小
Meta
移动设备默认的 viewport 是 layout viewport，也就是那个比屏幕要宽的 viewport，但在进行移动设备网站的开发时，我们需要的是 ideal viewport。那么怎么才能得到 ideal viewport 呢？
借助<meta>元素的viewport来帮助我们设置视口、缩放等
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
该 meta 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户手动缩放。如果你不这样的设定的话，那就会使用那个比屏幕宽的默认 viewport（layout viewport），也就是说会出现横向滚动条。
Value | 可能值 | 描述 |
|---|---|---|
width | 正整数或device-width | 以pixels（像素）为单位， 定义布局视口的宽度。 |
height | 正整数或device-height | 以pixels（像素）为单位， 定义布局视口的高度。 |
initial-scale | 0.0 - 10.0 | 定义页面初始缩放比率。 |
minimum-scale | 0.0 - 10.0 | 定义缩放的最小值；必须小于或等于maximum-scale的值。 |
maximum-scale | 0.0 - 10.0 | 定义缩放的最大值；必须大于或等于minimum-scale的值。 |
user-scalable | 一个布尔值（yes或者no） | 如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。 |
移动端适配
device-width就等于理想视口的宽度，所以设置width=device-width就相当于让布局视口等于理想视口
由于initial-scale = 理想视口宽度 / 视觉视口宽度，所以我们设置initial-scale=1;就相当于让视觉视口等于理想视口。
这时，1个CSS像素就等于1个设备独立像素
flexible方案
使用 rem 模拟 vw 特性适配多种屏幕尺寸
核心代码如下所示
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();上面的代码中，将 html 节点的 font-size 设置为页面 clientWidth(布局视口)的 1/10，即 1rem 就等于页面布局视口的 1/10，这就意味着我们后面使用的 rem 都是按照页面比例来计算的。
vh、vw方案
vh、vw方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份。
上面的flexible方案就是模仿这种方案，因为早些时候vw还没有得到很好的兼容。
vw(Viewport's width)：1vw等于视觉视口的1%vh(Viewport's height):1vh为视觉视口高度的1%vmin:vw和vh中的较小值vmax: 选取vw和vh中的较大值
比例关系我们也不用自己换算，我们可以使用PostCSS的 postcss-px-to-viewport 插件帮我们完成。
https://juejin.cn/post/6844903734347055118