vue kann eine Selbstanpassung erreichen: 1. Installieren Sie die Komponente „scale-box“ über den Befehl „npm install“ oder „yarn add“ und verwenden Sie „scale-box“, um dies zu erreichen adaptive Skalierung; 2. Realisieren Sie die Selbstanpassung, indem Sie das Pixelverhältnis des Geräts festlegen. 3. Stellen Sie das Zoomattribut über JS ein, um das Zoomverhältnis anzupassen, um eine Selbstanpassung zu erreichen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue2- und Vue3-Version, Dell G3-Computer.
Kann Vue anpassungsfähig sein?
Ja.
Detaillierte Erläuterung der drei Implementierungsmethoden der Vue-Bildschirmanpassung
Attribute:
width
Die Breite ist standardmäßig 1920
width
宽度 默认1920
height
高度 默认1080
bgc
背景颜色 默认"transparent"
delay
自适应缩放防抖延迟时间(ms) 默认100
height
Höhe ist standardmäßig 1080
bgc
Hintergrundfarbe ist standardmäßig "transparent"
VerzögerungAdaptive Skalierung Anti-Shake-Verzögerungszeit (ms) Standard <code>100
vue2-Version:
vue2-Großbildschirm-Anpassungsskalierungskomponente (vue2-scale-box – npm)
npm-Installation VUE2-SCALE-BOXoder
<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 Version: VUE3 große Bildschirmanpassungskalentkomponente (VUE3-SCALE-Box-NPM)
npm vue3-scale-box installierenoder
<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");
Erhalten Sie die Breite des Bildschirms:Ermitteln Sie die Auflösung des Bildschirms
window.screen.width * Fenster .devicePixelRatioErmitteln Sie die Höhe des Bildschirms:
window.screen.height * window.devicePixelRatio
Mobile Terminal-Anpassung (mithilfe des Postcss-px-to-viewport-Plug-ins)Offizielle Website:
https ://m.sbmmt.com/link/2dd6d682870e39d9927b80f8232bd276 Ansichtsfenster
Konfigurieren Sie die Parameter des Anpassungs-Plug-Ins (erstellt im Projektstammverzeichnis .postcssrc.js-Datei [Ebene mit dem src-Verzeichnis]) Fügen Sie den folgenden Code ein
Empfohlenes Lernen: „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 // 横屏时使用的视口宽度 } } };Nach dem Login kopierenvue.js Video-Tutorial
„Das obige ist der detaillierte Inhalt vonKann Vue anpassungsfähig sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!