Vue项目中px转化成rem方法！！！（小白求关爱）

第一。首先下载 npm install postcss-pxtorem

完成下载之后，在package.json文件中添加

添加这段代码

“postcss”: {
“plugins”: {
“autoprefixer”: {},
“postcss-pxtorem”: {
“rootValue”: 37.5, // 根元素大小1rem = 16px
“propList”: ["*"]
}
}
},

在项目中创建一个utils文件夹，编写rem.js文件

添加下列代码

function setRem() {
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
let htmlDom = document.querySelector(‘html’)
htmlDom.style.fontSize = htmlWidth / 20 + ‘px’
}
setRem()
window.onresize = function () {
setRem()
}

然后下一步在main。js中进行引入调用开发即可！

在随便进行编写vue文件即可完成！！！转换！如下图显示

这里我写的高度是200 基于750的设计稿进行换算

即完成进行换算了