1、安装 postcss-pxtorem
yarn add postcss-pxtorem -D
2、配置.postcssrc.js （postcssrc.config.js）
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 32, // 换算的基数(设计图750的根字体为32)
propList: ['*'], // 要转换的匹配项
selectorBlackList: ['.van'] // 忽略转换
},
}
}
3、不同尺寸适配
新建rem.js,并引入到main.js
rem.js
// 基准大小
const baseSize = 32;
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const width = document.documentElement.clientWidth ||
document.body.clientWidth;
const scale = width <= 640 ? width/750 : 640/750;
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
main.js
import '@/assets/js/rem'
