网页不同分辨率的适配方案

1.安装包

npm install postcss-px2rem
npm install px2rem-loader

2.新建文件夹utils，utils内部新建文件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引入

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

const { defineConfig } = require('@vue/cli-service')

const px2rem = require("postcss-px2rem")

// 配置基本大小
const postcss = px2rem({
  remUnit: 16
})


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

5.解决浏览器缩放报错

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
const debounce = (fn, delay) => {

  let timer = null;

  return function () {

    let context = this;

    let args = arguments;

    clearTimeout(timer);

    timer = setTimeout(function () {

      fn.apply(context, args);

    }, delay);

  }

}

// 解决ERROR ResizeObserver loop completed with undelivered notifications.
// admin界面使用elementui的报错
const _ResizeObserver = window.ResizeObserver;

window.ResizeObserver = class ResizeObserver extends _ResizeObserver {

  constructor(callback) {

    callback = debounce(callback, 16);

    super(callback);

  }

}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>