首先安装 amfe-flexible ,
npm install amfe-flexible --save
然后在main.js 引入
//在main.js 引入amfe-flexible
import 'amfe-flexible';
并且在main.js 主入口文件引入 amfe-flexible, 它会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem
<header>
<!-- 在页面 header标签中设置移动端视口-->
<meta name='viewport' content='width=device-width,initial-scale=1.0, maximum- scale=1.0,user-scalable=no'>
</header>
然后再第三方插件 postcss-pxtorem 他会自动将css代码中的px单位根据规则转换成rem 单位
//注意需要安装5.11 版本,否则报错
npm i postcss-pxtorem@5.1.1
项目根目录创建vue.config.js文件,设置如下配置
module.exports = {
lintOnSave:false,// eslint-loader 是否在保存的时候检查
css: {
loaderOptions: {
postcss: {
plugins: [
// 把px单位换算成rem单位
require("postcss-pxtorem")({
// 换算的基数 375的设计稿,换算基数就是37.5
rootValue: 37.5,
selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
propList: ["*"], //可以从px更改为rem的属性。
minPixelValue: 1 // 设置要替换的最小像素值。
})
]
}
}
}
}