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
Verwendung der Scale-Box-Komponente
Attribute:
-
widthDie Breite ist standardmäßig 1920width宽度 默认1920
-
height高度 默认1080
-
bgc背景颜色 默认"transparent"
-
delay自适应缩放防抖延迟时间（ms） 默认100
height Höhe ist standardmäßig 1080
bgcHintergrundfarbe 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-BOX
oder
YARN VUE2-SCALE-Box
uage:
<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>Nach dem Login kopieren
vue3 Version: VUE3 große Bildschirmanpassungskalentkomponente (VUE3-SCALE-Box-NPM)
npm vue3-scale-box installieren
oder
yarn vue3-scale-box hinzufügen
Verwendung:
<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>Nach dem Login kopieren
Legen Sie das Gerätepixelverhältnis fest (Gerätepixelverhältnis)
Erstellen Sie ein neues GerätPixelR atio unter die Utils.js-Datei des Projekts
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;Nach dem Login kopieren
Führen Sie sie in App.vue ein und verwenden Sie sie
<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>Nach dem Login kopieren
Passen Sie das Zoomverhältnis an, indem Sie das Zoomattribut über JS festlegen
Erstellen Sie eine neue Datei „monitorZoom.js“ unter den Utils des Projekts
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;
};Nach dem Login kopieren
In der Hauptsache. Einfach in js einführen und verwenden
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);
}Nach dem Login kopieren
Vollständiger Code
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");Nach dem Login kopieren
Ermitteln Sie die Auflösung des Bildschirms
Erhalten Sie die Breite des Bildschirms:
window.screen.width * Fenster .devicePixelRatio
Ermitteln 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 ://www.php.cn/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
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 kopieren
vue.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!
