1. 安装postcss-px2rem
yarn add postcss-px2rem // 或者 npm install postcss-px2rem
2. 在项目根目录下创建vue.config.js
const px2rem = require('postcss-px2rem');
const postcss = px2rem({
remUnit: 75
});
module.exports = {
//设置打包后为相对路径
publicPath: './',
css: {
loaderOptions: {
postcss: {
plugins: [ postcss ]
}
}
},
// ... 更多其他代码
}
3. 在home.vue中设置根字体大小
// ...更多其他代码
beforeMount() {
// 这样避免H5在webview中开始计算的根字体很小
// 我项目根字体设置的是32px
let timer1 = setInterval(() => {
let rootFontSize = (document.documentElement.clientWidth || document.body.clientWidth) / 10;
document.getElementsByTagName("html")[0].style.fontSize = rootFontSize + "px";
if (rootFontSize > 32) {
clearInterval(timer1);
}
}, 60);
let timer2 = setTimeout(() => {
clearInterval(timer1);
clearTimeout(timer2);
}, 3000);
},
// ...更多其他代码
网友评论