postcss-pxtorem配合lib-flexible，非常方便，vue-cli3.0后，项目配置被大大精简了。
安装 flexible和 postcss-px2rem（命令行安装）
npm install lib-flexible --save
npm install postcss-pxtorem --save-dev
或者：
npm install postcss-px2rem --save-dev
postcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。
引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
配置postcss-pxtorem
1.vue.config.js中配置
放在vue-cli3 项目中vue.config.js中（vue-cli3默认情况下没有vue.config.js，需要手动在项目根目录创建）
//////////////////待补充
2.postcss-pxtorem 在postcss.config.js中配置
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 75,//
propList: ['*']// 设置哪些属性可以从px变为rem。“！”表示不匹配，“ !font* ”表示不匹配字体相关属性
}
}
}
或者postcss-px2rem
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75
})
]
}
}
}
}
配置完成后，重启一下项目。
使用
下面来看我们的代码，代码中我们直接用px来写宽高：
image.png
image.png
再来看下html根字体的大小
image.png
image.png
rootValue：通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把rootValue设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
即：如果你设计稿的长度是750基数的可以将rootValue的值修改为75
网友评论