Kann Vue anpassungsfähig sein?

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>

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>

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;

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>

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

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);
}

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");

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 // 横屏时使用的视口宽度
    }
  }
};

Empfohlenes Lernen: „

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!