Vue屏幕自適應(yīng)三種實現(xiàn)方法詳解

更新時間：2022年11月23日 17:10:43 作者：UserGuan

在實際業(yè)務(wù)中，我們常用圖表來做數(shù)據(jù)統(tǒng)計，數(shù)據(jù)展示，數(shù)據(jù)可視化等比較直觀的方式來達到一目了然的數(shù)據(jù)查看，但在大屏開發(fā)過程中，常會因為適配不同屏幕而感到困擾，下面我們來解決一下這個不算難題的難題

使用 scale-box 組件

屬性：

width寬度默認1920
height高度默認1080
bgc背景顏色默認"transparent"
delay自適應(yīng)縮放防抖延遲時間（ms）默認100

vue2版本：vue2大屏適配縮放組件（vue2-scale-box - npm）

npm install vue2-scale-box

或者

yarn add vue2-scale-box

使用方法：

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

vue3版本：vue3大屏適配縮放組件（vue3-scale-box - npm）

npm install vue3-scale-box

或者

yarn add vue3-scale-box

使用方法：

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

設(shè)置設(shè)備像素比例（設(shè)備像素比）

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

class devicePixelRatio {
  /* 獲取系統(tǒng)類型 */
  getSystem() {
    const agent = navigator.userAgent.toLowerCase();
    const isMac = /macintosh|mac os x/i.test(navigator.userAgent);
    if (isMac) return false;
    // 目前只針對 win 處理，其它系統(tǒng)暫無該情況，需要則繼續(xù)在此添加即可
    if (agent.indexOf("windows") >= 0) return true;
  }
  /* 監(jiān)聽方法兼容寫法 */
  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（設(shè)備像素比例）變化后，計算頁面body標(biāo)簽zoom修改其大小，來抵消devicePixelRatio帶來的變化
    document.getElementsByTagName("body")[0].style.zoom =
      1 / window.devicePixelRatio;
  }
  /* 監(jiān)聽頁面縮放 */
  watch() {
    const that = this;
    // 注意: 這個方法是解決全局有兩個window.resize
    that.addHandler(window, "resize", function () {
      that.correct(); // 重新校正瀏覽器縮放比例
    });
  }
  /* 初始化頁面比例 */
  init() {
    const that = this;
    // 判斷設(shè)備，只在 win 系統(tǒng)下校正瀏覽器縮放比例
    if (that.getSystem()) {
      that.correct(); // 校正瀏覽器縮放比例
      that.watch(); // 監(jiān)聽頁面縮放
    }
  }
}
export default devicePixelRatio;

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

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

通過JS設(shè)置zoom屬性調(diào)整縮放比例

在項目的 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";
/* 調(diào)整縮放比例 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);
}
/* 調(diào)整縮放比例 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 插件）

官網(wǎng)：https://github.com/evrone/postcss-px-to-viewport

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

或者

yarn add -D postcss-px-to-viewport

配置適配插件的參數(shù)（在項目根目錄創(chuàng)建 .postcssrc.js 文件[與 src 目錄平級]）粘貼以下代碼即可

module.exports = {
  plugins: {
    autoprefixer: {}, // 用來給不同的瀏覽器自動添加相應(yīng)前綴，如-webkit-，-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 需要轉(zhuǎn)換的單位，默認為"px"
      viewportWidth: 390, // UI設(shè)計稿的寬度
      unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點位數(shù)
      propList: ["*"], // 指定轉(zhuǎn)換的css屬性的單位，*代表全部css屬性的單位都進行轉(zhuǎn)換
      viewportUnit: "vw", // 指定需要轉(zhuǎn)換成的視窗單位，默認vw
      fontViewportUnit: "vw", // 指定字體需要轉(zhuǎn)換成的視窗單位，默認vw
      selectorBlackList: ["wrap"], // 需要忽略的CSS選擇器，不會轉(zhuǎn)為視口單位，使用原有的px等單位
      minPixelValue: 1, // 默認值1，小于或等于1px則不進行轉(zhuǎn)換
      mediaQuery: false, // 是否在媒體查詢的css代碼中也進行轉(zhuǎn)換，默認false
      replace: true, // 是否直接更換屬性值，而不添加備用屬性
      exclude: [/node_modules/], // 忽略某些文件夾下的文件或特定文件，用正則做目錄名匹配，例如 'node_modules' 下的文件
      landscape: false, // 是否處理橫屏情況
      landscapeUnit: "vw", // 橫屏?xí)r使用的視窗單位，默認vw
      landscapeWidth: 2048 // 橫屏?xí)r使用的視口寬度
    }
  }
};

到此這篇關(guān)于Vue屏幕自適應(yīng)三種實現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)Vue屏幕自適應(yīng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: