站長資訊網
vue能實現自適應，其實現自適應的方法有：1、通過“npm install”或“yarn add”命令安裝“scale-box”組件，并使用“scale-box”實現適配縮放；2、通過設置設備像素比例實現自適應；3、通過JS設置zoom屬性調整縮放比例來實現自適應即可。
本教程操作環境：Windows10系統、vue2&&vue3版、Dell G3電腦。
vue能實現自適應嗎？
能。
Vue屏幕自適應三種實現方法詳解
使用 scale-box 組件
屬性：
width寬度 默認1920height高度 默認1080bgc背景顏色 默認"transparent"delay自適應縮放防抖延遲時間（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>
登錄后復制
設置設備像素比例（設備像素比）
在項目的 utils 下新建 devicePixelRatio.js 文件
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;
登錄后復制
在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設置zoom屬性調整縮放比例
在項目的 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"; /* 調整縮放比例 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");
登錄后復制
獲取屏幕的分辨率
獲取屏幕的寬：
window.screen.width * window.devicePixelRatio
獲取屏幕的高：
window.screen.height * window.devicePixelRatio
移動端適配（使用 postcss-px-to-viewport 插件）
官網：https://www.php.cn/link/2dd6d682870e39d9927b80f8232bd276
npm install postcss-px-to-viewport –save-dev
或者
yarn add -D postcss-px-to-viewport
配置適配插件的參數（在項目根目錄創建 .postcssrc.js 文件[與 src 目錄平級]）粘貼以下代碼即可
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 // 橫屏時使用的視口寬度 } } };
登錄后復制
推薦學習：《vue.js視頻教程》
