rem适配
- rem是相对于根元素来动态调整大小的单位。
思路
- 想象成把屏幕分成 10 等分，那么 1rem = document.doumentElement.clientWidth / 10； (例如：375px 那么 1rem = 37.5px)
// 代码如下
let doc = document.documentElement
let width = doc.clientWidth
// 把屏幕分成10份
let num = 10
doc.style.fontSize = width / num + 'px' // 37.5px
- 如果要画一个40 * 40的正方形。则width: 40 / 37.5rem
媒体查询 @media
- 主要通过查询不同宽度来执行不同css，达到适配屏幕的目的。
vw + vh + 媒体查询
- 使用插件
(https://github.com/evrone/postcss-px-to-viewport), 将px转换为vw
