vue能实现自适应吗

<template>     <div>         <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100">             <router-view />         </scale-box>     </div> </template> <script> import ScaleBox from "vue2-scale-box"; export default {     components: { ScaleBox }, }; </script> <style lang="scss"> body {     margin: 0;     padding: 0;     background: url("@/assets/bg.jpg"); } </style>

<template>     <ScaleBox :width="1920" :height="1080" bgc="transparent" :delay="100">         <router-view />     </ScaleBox> </template> <script> import ScaleBox from "vue3-scale-box"; </script> <style lang="scss"> body {     margin: 0;     padding: 0;     background: url("@/assets/bg.jpg"); } </style>

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;

<template>   <div>     <router-view />   </div> </template> <script> import devPixelRatio from "@/utils/devicePixelRatio.js"; export default {   created() {     new devPixelRatio().init(); // 初始化页面比例   }, }; </script> <style lang="scss"> body {   margin: 0;   padding: 0; } </style>

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; };

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");

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 // 横屏时使用的视口宽度     }   } };