第一。首先下载 npm install postcss-pxtorem
完成下载之后,在package.json文件中添加
添加这段代码
“postcss”: {
“plugins”: {
“autoprefixer”: {},
“postcss-pxtorem”: {
“rootValue”: 37.5, // 根元素大小1rem = 16px
“propList”: ["*"]
}
}
},
在项目中创建一个utils文件夹,编写rem.js文件
添加下列代码![在这里插入图片描述](https://img-blog.csdnimg.cn/2020021815214783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExNDcwMQ==,size_16,color_FFFFFF,t_70)
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的设计稿进行换算