基于vue-cli4配置px2rem做到移动端自适配
在实际开发中，我们需要将设计稿中的px转换成rem，然后再写入到样式中。postcss-px2rem可以帮助我们自动完成转换。
一、安装模块
cnpm install amfe-flexible postcss-px2rem -S
amfe-flexible：是rem的适配插件。（例：750px == 10rem）
postcss-px2rem：负责将输入的px自动转为rem。
二、入口文件main.js里引入amfe-flexible
import "amfe-flexible";
三、以下配置二选一即可：
1、在项目根目录创建vue.config.js文件，并完成以下配置：
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// 设计稿宽度的1/10，一般为75
require('postcss-px2rem')({remUnit: 75}),
]
}
}
}
}
2、我们也可以打开package.json，增加以下配置：
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem": {
"remUnit": 75
}
}
}
配置的remUnit设置为75（设计稿宽度的1/10），表示75px将会转化为1rem。
四、重启项目
cnpm run serve
发表评论 (审核通过后显示评论)：