了解一下rem
rem（font size of the root element）是相對長度單位。相對於根元素（即html 元素）font-size 計算值的倍數。
適配原理：將px 替換成rem，動態修改html 的font-size 適配。它可以很好的根據根元素的字體大小來進行變化，從而達到各種屏幕基本一致的效果體驗
u 同學給的設計稿
常見的設計圖寬度，當然也可以是其他的寬度，比如720 像素的
- 375 iPhone7
- 750 二倍圖
- 320 iPhone5
- 640 二倍圖
為什麼給的是375？因為這個是iPhone7 的寬度，
也就是說最低兼容到375 像素的屏幕。（低於375 佈局可能會亂）
其他的同理
1. vw + rem 方案
如果效果圖是375px 的，
html 的style 屬性的font-size 設置為26.666666vw
css 中20px 改寫為0.2rem 即可
<!DOCTYPE html>
<html lang="en" style="font-size: 26.666666vw">
<head>
<meta charset="UTF-8" />
<!--
下面一行代码的解析：
width=device-width 内容宽度 等于 设备宽度，换句话说 网页宽度为设备宽度
initial-scale=1.0 初始缩放比等于1.0倍，换句话说 网页初始化缩放比为1.0 就是默认不缩放
-->
<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;
/*
PC端写法
width: 100px;
height: 18px; */
}
</style>
</head>
<body>
<div class="app-main"></div>
</body>
</html>
复制代码為什麼是26.666666vw？得了解下面幾個問題
- 1. 什么是 viewport？
- 2. 为什么要用它？
- 3. 怎么用？
- 4. `vw`、`vh`是什么?
答：
1. 什么是 viewport？
[MDN viewport](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Viewport_concepts)的解析是
视口(viewport)代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。
2. 用它来移动端适配，兼容不同的设备，当然不局限于移动端，这里只讨论移动端
3. 只需要在`head`中定义 `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`就行，具体如下：
`
<head>
<meta charset="UTF-8" />
<!--
下面一行代码的解析：
width=device-width 内容宽度 等于 设备宽度，换句话说 网页宽度为设备宽度
initial-scale=1.0 初始缩放比等于1.0倍，换句话说 网页初始化缩放比为1.0 就是默认不缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
`
4. `vw` 是视口宽度的一个单位，viewport width 的简称，根据 viewport 相关定义，
已经定义好了的，PC 端 100vw 就等于浏览器的宽度，移动端 100vw 就是设备的宽度(按照上面的 width=device-width)
`vh` 同理，是视口高度，viewport height 的简称，100vh 就是可视窗口的高度
复制代码了解完上面的知識點，我們可以回答
為什麼font-size 設置成26.666666vw?
设计图的宽度 = 设备宽度
假如 设计图的宽度为 375px，当然可以是其他的，这里是一个假如，如果是640，750就把375换成对应的数值按照以下方法换算就行就行
因为
375px = 100vw
那么
1px = 100 / 375 vw = 0.26666666666666666vw（约等于）
为了方便计算，放大一百倍，精确到6位，只能下取舍，因为上取舍，计算宽度的时候会大于页面宽度，从而出现滚动条
故：
100px = 26.666666vw（约等于）
又因为给 html 标签设置 font-size 为 26.666666vw （约等于）
1rem为font-size的大小
所以：
1rem = 100px
0.2rem = 20px
也就是说：
设计图上的 12px 换算成rem就是0.12rem，20px就写成0.2rem即可
复制代码優點：不需要引入新的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 |
2. flexible 方案，（阿里）
在lib-flexible的github 上有著這樣的一句話。
由於
viewport單位得到眾多瀏覽器的兼容，lib-flexible這個過渡方案已經可以放棄使用，不管是現在的版本還是以前的版本，都存有一定的問題。建議大家開始使用viewport 來替代此方案。vw的兼容方案可以參閱《如何在Vue 項目中使用vw 實現移動端適配》一文。
我們可以得到一個很明確的信息，lib-flexible 這個方案已經被放棄使用了，我們可以去擁抱 vw 的那套實現方案。