移动端适配
参考地址：
在 PC 端，一般情况下，1 个物理像素 = 1 个 css 像素。
在移动端，各种手机机型分辨率不同，1 个物理像素对应不同大小的 css 像素。
可以使用 window.devicePixelRatio当前显示设备 的物理像素分辨率与CSS 像素分辨率比率。简单来说，这告诉浏览器应该使用多少屏幕的实际像素来绘制单个 CSS 像素。
如下有几种适配方案：
- flexible + px2rem + rem
- vw
rem：根标签（<html>）的字体大小
1 flexible.js
1、介绍
将 1rem 重设为 10vw
相当于屏幕越宽，展示的内容越大，而不是越多。
2、github 地址
https://github.com/amfe/lib-flexible
3、安装
npm install amfe-flexible
4、在 main.js 中引入
import 'amfe-flexible'
2 px2rem
1、介绍
将 px 转化为 rem
考虑到项目用的是 Vue 框架，要使用 UI 库，例如 Vant 使用的单位是 px。
若不考虑此类 UI 库，则不需要引入 px2rem，开发时单位均使用 rem 即可
2、安装
此版本对应配置文件
npm install postcss-pxtorem@5.1.1
3、配置
在根文件夹创建配置文件 postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [
'Android >= 4.0',
'iOS >= 7',
'Chrome > 31',
'ff > 31',
'ie >= 10'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
3 关于 vw
vw：视窗宽度，屏幕宽度 = 100vw
对于简单的项目，完全可以使用 vw 代替 px 来进行适配。即所有单位都用 vw，如字体大小、宽高等等。因为实际上 flexible 也是将 1rem 重设为 10vw。
为什么不早点用 vw ？
浏览器最开始不支持 vw，早期浏览器只支持 px、%、rem、em，直到 2018 年才开始支持 vw 单位
