h5项目,首先考虑的是使用vant-ui框架,但是部分功能需要自定义样式,而且要考虑不同设备的显示情况,所以打算引入rem布局方式
1如果需要使用 rem
单位进行适配,推荐使用以下两个工具:
- postcss-pxtorem,是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位
- amfe-flexible,用于设置 rem 基准值
2amfe-flexible引入到项目里
// main.js
require('amfe-flexible/index')
3由于项目中已经使用了vant-ui,直接引入上面两个工具会不会出问题?
- 如果设计稿尺寸是375,直接用没什么问题
- 如果设计稿尺寸不是375,而是750,PostCSS配置时需要转换下,代码如下↓
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue:75, // vant官方使用的是37.5
//selectorBlackList: ['van'], // 标签名van开头,不转换rem
propList: ['*']
})
]
}
}
}