配置postcss-pxtorem -- 移动端适配
一、先下载 postcss-pxtorem
npm install postcss-pxtorem
二、配置文件
新建postcss.config.js
在文件中添加如下代码
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 16,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
propList: ['*']
}
}
}
三,重新启动项目
npm run serve
特别注意: 项目不重启,配置文件不会起效果
总结
自动适配项目中的px,将px转为rem