方案一：使用 scale-box 组件

属性：

• width 宽度 默认 1920
• height 高度 默认 1080
• bgc 背景颜色 默认 "transparent"
• delay自适应缩放防抖延迟时间（ms） 默认 100

  vue2版本：vue2大屏适配缩放组件（vue2-scale-box - npm）

  npm install vue2-scale-box

  或者

  yarn add vue2-scale-box

  使用方法：

  vue3版本：vue3大屏适配缩放组件（vue3-scale-box - npm）

  npm install vue3-scale-box

  或者

  yarn add vue3-scale-box

  使用方法：

  方案二：设置设备像素比例（设备像素比）

  在项目的 utils 下新建 devicePixelRatio.js 文件

  class devicePixelRatio {
    /* 获取系统类型 */
    getSystem() {
      const agent = navigator.userAgent.toLowerCase();
      const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
      if (isMac) return false;
      // 目前只针对 win 处理，其它系统暂无该情况，需要则继续在此添加即可
      if (agent.indexOf("windows") >= 0) return true;
    }
    /* 监听方法兼容写法 */
    addHandler(element, type, handler) {
      if (element.addEventListener) {
        element.addEventListener(type, handler, false);
      } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
      } else {
        element["on" + type] = handler;
      }
    }
    /* 校正浏览器缩放比例 */
    correct() {
      // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化
      document.getElementsByTagName("body")[0].style.zoom =
        1 / window.devicePixelRatio;
    }
    /* 监听页面缩放 */
    watch() {
      const that = this;
      // 注意: 这个方法是解决全局有两个window.resize
      that.addHandler(window, "resize", function () {
        that.correct(); // 重新校正浏览器缩放比例
      });
    }
    /* 初始化页面比例 */
    init() {
      const that = this;
      // 判断设备，只在 win 系统下校正浏览器缩放比例
      if (that.getSystem()) {
        that.correct(); // 校正浏览器缩放比例
        that.watch(); // 监听页面缩放
      }
    }
  }
  export default devicePixelRatio;

  在 App.vue 中引入并使用即可

  方案三：通过 JS 设置 zoom 属性调整缩放比例

  在项目的 utils 下新建 monitorZoom.js 文件

  export const monitorZoom = () => {
    let ratio = 0,
      screen = window.screen,
      ua = navigator.userAgent.toLowerCase();
    if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
    } else if (~ua.indexOf("msie")) {
      if (screen.deviceXDPI && screen.logicalXDPI) {
        ratio = screen.deviceXDPI / screen.logicalXDPI;
      }
    } else if (
      window.outerWidth !== undefined &&
      window.innerWidth !== undefined
    ) {
      ratio = window.outerWidth / window.innerWidth;
    }
    if (ratio) {
      ratio = Math.round(ratio * 100);
    }
    return ratio;
  };
  

  在 main.js 中引入并使用即可

  import { monitorZoom } from "@/utils/monitorZoom.js";
  const m = monitorZoom();
  if (window.screen.width * window.devicePixelRatio >= 3840) {
    document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
  } else {
    document.body.style.zoom = 100 / Number(m);
  }

  完整代码

  import Vue from "vue";
  import App from "./App.vue";
  import router from "./router";
  /* 调整缩放比例 start */
  import { monitorZoom } from "@/utils/monitorZoom.js";
  const m = monitorZoom();
  if (window.screen.width * window.devicePixelRatio >= 3840) {
    document.body.style.zoom = 100 / (Number(m) / 2); // 屏幕为 4k 时
  } else {
    document.body.style.zoom = 100 / Number(m);
  }
  /* 调整缩放比例 end */
  Vue.config.productionTip = false;
  new Vue({
    router,
    render: (h) => h(App),
  }).$mount("#app");
  

  获取屏幕的分辨率

  获取屏幕的宽：

  window.screen.width * window.devicePixelRatio

  获取屏幕的高：

  window.screen.height * window.devicePixelRatio

  移动端适配（使用 postcss-px-to-viewport 插件）

  官网：https://github.com/evrone/postcss-px-to-viewport

  npm install postcss-px-to-viewport --save-dev

  或者

  yarn add -D postcss-px-to-viewport

  配置适配插件的参数（在项目根目录创建 .postcssrc.js 文件[与 src 目录平级]）粘贴以下代码即可

  module.exports = {
    plugins: {
      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      "postcss-px-to-viewport": {
        unitToConvert: "px", // 需要转换的单位，默认为"px"
        viewportWidth: 390, // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: ["wrap"], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
        replace: true, // 是否直接更换属性值，而不添加备用属性
        exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，用正则做目录名匹配，例如 'node_modules' 下的文件
        landscape: false, // 是否处理横屏情况
        landscapeUnit: "vw", // 横屏时使用的视窗单位，默认vw
        landscapeWidth: 2048 // 横屏时使用的视口宽度
      }
    }
  };
  

   
   网站分类包括哪些类型  西安网络推广  hbuilder怎么做网页  开发app的公司有哪些  浏阳网站开发  威海seo