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 // 橫屏時使用的視口寬度     }   } };