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