[JavaScript知识库]vue项目全局把px转换成rem

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,
    ...
}