1.安装lib-flexible并引入
npm i lib-flexible --save
在入口文件main.js内引入
import "lib-flexible";
或者参考我的上篇文章:Vue中使用REM布局
2.安装postcss-pxtorem
npm install postcss-pxtorem -D
在项目的根目录 .postcssrc.js 文件中进行配置
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,//结果为:设计稿元素尺寸/37.5,比如元素宽375px,最终页面会换算成 10rem
propList: ['*']
}
}
}
此时命令行会有报红
原因是版本高了,引用有修改
修改为以下配置,警告消失
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
'postcss-pxtorem': {
rootValue: 37.5,//结果为:设计稿元素尺寸/37.5,比如元素宽375px,最终页面会换算成 10rem
propList: ['*']
}
}
}
3.vant类ui框架
vant类ui框架是以设计稿375px为基准,而我们日常设计稿为750px
根据文件名来进行不同的rootValue设置
.postcssrc.js 文件修改
module.exports = ({
file
}) => {
let isVant = file && file.dirname && file.dirname.indexOf("vant") > -1;
if(isVant){// 判断条件 如有多种情况,进行不同判断
rootValue = 37.5
}else{
rootValue = 75
}
return {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
]
},
'postcss-pxtorem': {
rootValue: rootValue,
propList: ['*']
}
}
}
}
4.效果
h1 {
width: 750px;
height: 100px;
font-size: 24px;
background: red;
color: #fff;
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200702183739522.png