vue项目全局把px转换成rem
首先vscode要有px to rem
插件
1、vue.config.js
在vue.config.js中配置
css: {
...
// css预设器配置
loaderOptions: {
css: {
...
},
postcss: [
// options here will be passed to postcss-loader
plugins: [
required('postcss-px2rem')({
// 基准大小,需和rem.js中相同
remUnit: 100
})
]
]
}
}
2、/utils/rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = 100
// 设置 rem 函数
function setRem() {
let scale = window.serverConfig.screenAdaptation?document.documentElement.clientWidth / 1600:1;
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize = baseSize * Math.min(scale,3) + 'px';
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setTimeout(setRem,300)
}
//
export {
setRem
}
3、main.js
import './utils/rem'
4、public/config.js
window.serverConfig = {
...
screenAdaptation: true,
...
}