vue项目实现PC端各分辨率适配

最近做项目刚好用到pc端分辨率适配，在这里分享一下我的做法。

1.先下载需要的插件包

px2rem-loader、postcss-px2rem

npm install px2rem-loader

npm install postcss-px2rem

2. 配置rem.js文件（名称自己随意取就可以），一般放置在utils文件夹里，没有就新建一个utils文件夹与assets文件夹同级

rem.js

// rem等比适配配置文件
// 基准大小
const baseSize = 16
    // 设置 rem 函数
function setRem() {
    const scale = document.documentElement.clientWidth / 1920
        // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
    // 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem()
}

3. 在main.js中引用配置好的rem.js

4. 在vue.config.js中进行相关配置

const px2rem = require("postcss-px2rem");

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16,
});

 remUnit要和rem.js中的baseSize一致

module.exports = defineConfig({
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions:{
          plugins: [
            postcss
          ]
        }
      }
    }
  },
})

---

特殊注意：

如果使用postcss-px2rem在运行时报错，可以卸载postcss-px2rem，下载postcss-pxtorem，

创建一个postcss.config.js与vue.config.js同级。

npm uninstall postcss-px2rem

npm install postcss-pxtorem

postcss.config.js

const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');
module.exports = {
  plugins: [autoprefixer(), px2rem({
    rootValue: 16,
    unitPrecision: 5,
    propList: ['*']
  })],
};