1、Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：
[lib-flexible 用于设置 rem 基准值，设置根字体的大小
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
2、使用 lib-flexible 动态设置 REM 基准值
html 标签的字体大小
2.1 安装
// yarn add amfe-flexible
cnpmiamfe-flexible-S
2.2 然后在 main.js 中加载执行该模块
import 'amfe-flexible'
2.3 最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化
. 例如在 iPhone 6/7/8 设备下，html 标签字体大小为 37.5 px
. 例如在 iPhone 6/7/8 Plus 设备下，html 标签字体大小为 41.4 px
3、使用 postcss-pxtorem 将 px 转为 rem
3.1 安装
// yarn add -D postcss-pxtorem
// -D 是 --save-dev 的简写
cnpminstallpostcss-pxtorem-D
3.2 然后在项目根目录中创建 .postcssrc.js 文件
module.exports={
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0','iOS >= 8']
},
'postcss-pxtorem': {
rootValue:37.5,
propList: ['*']
}
}
}
3.3 配置完毕，重新启动服务
npmrunserve
最后测试：刷新浏览器页面，审查元素的样式查看是否已将 px 转换为 rem
转换之前的样式
4、注意事项：
该插件不能转换行内样式中的 px，例如 <div style="width: 200px;"></div>
5、postcss-pxtorem 插件的配置
rootValue：表示根元素字体大小，它会根据根元素大小进行单位转换
propList 用来设定可以从 px 转为 rem 的属性
例如 * 就是所有属性都要转换，width 就是仅转换 width 属性
rootValue 应该如何设置呢？
如果你使用的是基于lib-flexable的REM适配方案，则应该设置为你的设计稿的十分之一。
例如设计稿是750宽，则应该设置为75。
大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样。
但是 Vant 建议设置为 37.5，为什么呢？
因为Vant是基于375写的，所以如果你设置为75的话，Vant的样式就小了一半。
所以如果设置为 37.5 的话，Vant 的样式是没有问题的，但是我们在测量设计稿的时候都必须除2才能使用，否则就会变得很大。
这样做其实也没有问题，但是有没有更好的办法呢？我就想实现测量多少写多少（不用换算）。于是聪明的你就想，可以不可以这样来做？
如果是 Vant 的样式，就把 rootValue 设置为 37.5 来转换
如果是我们的样式，就按照 75 的 rootValue 来转换
通过查阅文档我们可以看到 rootValue 支持两种参数类型
数字：固定值
函数：动态计算返回
postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
修改配置如下
/**
* PostCSS 配置文件
*/
module.exports={
// 配置要使用的 PostCSS 插件
plugins: {
// 配置使用 autoprefixer 插件
// 作用：生成浏览器 CSS 样式规则前缀
// VueCLI 内部已经配置了 autoprefixer 插件
// 所以又配置了一次，所以产生冲突了
// 'autoprefixer': { // autoprefixer 插件的配置
// // 配置要兼容到的环境信息
// browsers: ['Android >= 4.0', 'iOS >= 8']
// },
// 配置使用 postcss-pxtorem 插件
// 作用：把 px 转为 rem
'postcss-pxtorem': {
rootValue({file}) {
returnfile.indexOf('vant')!==-1?37.5:75
},
propList: ['*']
}
}
}
其他
[Android]
>=4.0
[iOS]
>=8
具体语法请参考这里
5. 配置完毕，把服务重启一下，最后测试，very good
