时讯：vue能实现自适应吗

<script>import ScaleBox from "vue2-scale-box";export default {    components: { ScaleBox },};</script>

<script>import ScaleBox from "vue3-scale-box";</script>

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;

<script>import devPixelRatio from "@/utils/devicePixelRatio.js";export default {  created() {    new devPixelRatio().init(); // 初始化页面比例  },};</script>

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