用REM解决多屏适配

1. 作用

在项目中引入rem，可以解决多屏适配问题

2. 原因

vant插件中的默认样式都是使用px作为单位，所有移动端的项目就需要来用rem进行适配，方便各种屏幕大小的设备都可以正常的浏览

3. 解决

两个工具包 ：

1. posstcss-pxtorem ： 可以把项目中的 px 全部转换为 rem
2. lib-flexible ： 根据不同的屏幕宽度，可以动态的设置rem的参考值–>就是html标签的font-size的值。

注意：mafe-flexible 是它的包名 不是 lib-flexible

4. 安装包

1 . 把px单位自动转成rem单位
npm i postcss-pxtorem@5.1.1
要指定版本 最新版本可能会出现不能正常使用的问题
2. 根据设置屏幕的宽度去调整rem的值（html标签上font-size的大小）
npm i amfe-flexible

5. 配置 postcss

module.exports = {
plugins: {
‘postcss-pxtorem’: {
// 能够把所有元素的px单位转成Rem
// rootValue: 转换px的基准值。
// 例如一个元素宽是75px，则换成rem之后就是2rem。
rootValue: 37.5,
propList: [’*’]
}
}
}

6. 引入flexible

import 'amfe-flexible'

end…