1站超、安裝 postcss-pxtorem
yarn add postcss-pxtorem -D
2灸促、配置.postcssrc.js （postcssrc.config.js）
module.exports = {
"plugins": {
"postcss-pxtorem": {
rootValue: 32, // 換算的基數(shù)(設(shè)計(jì)圖750的根字體為32)
propList: ['*'], // 要轉(zhuǎn)換的匹配項(xiàng)
selectorBlackList: ['.van'] // 忽略轉(zhuǎn)換
},
}
}
3、不同尺寸適配
新建rem.js,并引入到main.js
rem.js
// 基準(zhǔn)大小
const baseSize = 32;
// 設(shè)置 rem 函數(shù)
function setRem () {
// 當(dāng)前頁(yè)面寬度相對(duì)于 750 寬的縮放比例膏秫，可根據(jù)自己需要修改侮措。
const width = document.documentElement.clientWidth ||
document.body.clientWidth;
const scale = width <= 640 ? width/750 : 640/750;
// 設(shè)置頁(yè)面根節(jié)點(diǎn)字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時(shí)重新設(shè)置 rem
window.onresize = function () {
setRem()
}
main.js
import '@/assets/js/rem'
