第一。首先下载 npm install postcss-pxtorem
完成下载之后,在package.json文件中添加
添加这段代码
“postcss”: {
“plugins”: {
“autoprefixer”: {},
“postcss-pxtorem”: {
“rootValue”: 16, // 根元素大小1rem = 16px
“propList”: ["*"]
}
}
},
在项目中创建一个utils文件夹,编写rem.js文件
添加下列代码
const baseSize = 32
// 设置 rem 函数
function setRem() {
// 750 是设计稿的宽度
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + ‘px’
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}