1.下载postcss-pxtorem插件
npm install postcss-pxtorem --save-dev
2.package.json文件内配置postcss
{
"name": "",
"version": "",
"private": ,
"scripts": {
...
},
"dependencies": {
...
},
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-pxtorem": {
"rootValue": 75, // 换算的基数(设计图750的根字体为75)
"propList": [
"*"
]
}
}
},
"devDependencies": {
...
}
}
引用rem.js
src/assets/setRem.js
const setRem = () => {
const html = document.documentElement
const width = html.getBoundingClientRect().width
html.style.fontSize = width / 10 + 'px'
}
setRem()
window.addEventListener('orientationchange', setRem)
main.js中全局引用
import './assets/js/setRem'