1.安装插件
- 安装
npm i amfe-flexible postcss-pxtorem -S -
amfe-flexible：用于设置根字体大小的 -
postcss-pxtorem：用来自动转换单位的
2.设置根字体大小和单位转化
- 在根目录创建一个
.postcssrc.js
image.png
具体代码如下
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 75, // 具体值根据项目UI实际情况，默认給37.5
propList: ["*"],
},
},
};
-
在main.js文件中，导入import 'amfe-flexible/index'
image.png
3.简单案例
测试代码如下
<template>
<div>
<div class="box">
<span>我是测试代码</span>
</div>
</div>
</template>
<style lang="scss" scoped>
body {
.box {
width: 750px;
height: 750px;
line-height: 100px;
background-color: pink;
span {
font-size:24px;
}
}
}
</style>
image.png
