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来写宽高:
![](https://i-blog.csdnimg.cn/blog_migrate/9726aca894c7d53d235d30660a01b0df.png)
image.png
![](https://i-blog.csdnimg.cn/blog_migrate/e6636324ec8313f864c48d8a86dec70e.png)
image.png
再来看下html根字体的大小
![](https://i-blog.csdnimg.cn/blog_migrate/fa3c83500153c8c766ccaf6c5f7950ca.png)
image.png
![](https://i-blog.csdnimg.cn/blog_migrate/7de8dec900db100ec38195e0a9aebc70.png)
image.png
rootValue:通常我们是根据设计图来定这个值,原因很简单,便于开发。假如设计图给的宽度是750,我们通常就会把rootValue设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
即:如果你设计稿的长度是750基数的可以将rootValue的值修改为75