移动端适配
rem（font size of the root element）是相对长度单位。相对于根元素（即 html 元素）font-size 计算值的倍数
适配原理：将 px 替换成 rem，动态修改 html 的 font-size 适配。它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一致的效果体验
常见的设计稿
常见的设计图宽度，当然也可以是其他的宽度，比如 720 像素的
- 375 iPhone7
- 750 二倍图
- 320 iPhone5
- 640 二倍图
为什么给的是 375？因为这个是 iPhone7 的宽度，也就是说最低兼容到 375 像素的屏幕（低于 375 布局可能会乱）
vw + rem 方案
如果效果图是 375px 的，html 的 style 属性的 font-size 设置为 26.666666 vw，css 中 20px 改写为 0.2rem 即可
<!DOCTYPE html>
<html lang="en" style="font-size: 26.666666vw">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
/* 设置 div 为宽度100px高度18px */
.app-main {
width: 1rem;
height: 0.18rem;
}
</style>
</head>
<body>
<div class="app-main"></div>
</body>
</html>视口 (viewport) 代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。
用它来移动端适配，兼容不同的设备，当然不局限于移动端，这里只讨论移动端。只需要在head中定义 <meta name="viewport" content="width=device-width, initial-scale=1.0" />就行
vw
是视口宽度的一个单位，viewport width 的简称，根据 viewport 相关定义
已经定义好了的，PC 端 100vw 就等于浏览器的宽度，移动端 100vw 就是设备的宽度(按照上面的 width=device-width)
vh同理，是视口高度，viewport height 的简称，100vh 就是可视窗口的高度
font-size 设置成 26.666666vw?
假如设计图的宽度为 375px，750 就把 375 换成对应的数值按照以下方法换算就行就行
因为 375px = 100vw，那么 1px = 100/375 vw = 0.26666666666666666vw（约等于）， 那么 100 px = 26.666666vw（约等于
所以 1 rem = 100px
优点：不需要引入新的 js，一行代码搞定适配问题缺点：浏览器兼容性差，IE9 以下不支持，但现代浏览器，特别是移动端，基本都支持
| 设计图大小（单位 px） | html 的 font-size（单位 vw） | 备注 |
|---|---|---|
| 375 | 26.666666 | 效果图 20px，代码应该写 0.2rem |
| 750 | 13.333333 | 效果图 20px，代码应该写 0.2rem |
| 320 | 31.25 | 效果图 20px，代码应该写 0.2rem |
| 640 | 15.625 | 效果图 20px，代码应该写 0.2rem |
flexible 方案(阿里)
在 lib-flexible 的 github 上有着这样的一句话。
由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方案。vw 的兼容方案可以参阅《如何在 Vue 项目中使用 vw 实现移动端适配》一文
我们可以得到一个很明确的信息，lib-flexible 这个方案已经被放弃使用了，我们可以去拥抱 vw 的那套实现方案