使用 scale-box 組件
屬性：
width寬度 默認1920
height高度 默認1080
bgc背景顏色 默認"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 {
? /* 獲取系統(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（設備像素比例）變化后，計算頁面body標簽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;
? ? // 判斷設備，只在 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設置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://github.com/evrone/postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev
或者
yarn add -D postcss-px-to-viewport
配置適配插件的參數（在項目根目錄創(chuàng)建 .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 // 橫屏時使用的視口寬度
? ? }
? }
};
文章來源：https://www.jb51.net/article/268317.htm
