方案一
- npm install postcss-pxtorem@5.1.1 -D
npm install amfe-flexible -D // 自適應(yīng)瀏覽器寬度 - main.js 引入
import 'amfe-flexible'
- vue.config.js 文件
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
// rootValue: 37.5, // 換算的基數(shù)
rootValue: 18.75, // 換算的基數(shù)
propList: ['*'],
exclude: (e) => {
// site下的文件不需要進(jìn)行轉(zhuǎn)換
return /src(\\|\/)views(\\|\/)site/.test(e);
},
}),
]
}
}
},
方案二
1.創(chuàng)建文件 assets-->js-->rem.js
// 設(shè)置 rem 函數(shù)
const fontSize = 32
const setRem = () => {
// 320 默認(rèn)大小16px; 320px = 20rem ;每個元素px基礎(chǔ)上/16
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
// 設(shè)置根元素字體大小
htmlDom.style.fontSize= htmlWidth/fontSize + 'px';
}
// 初始化
setRem();
// 改變窗口大小時重新設(shè)置 rem
window.onresize = function () {
setRem()
}
2.main.js 文件引入
import './assets/js/rem'
