Vue boleh mencapai penyesuaian diri Kaedah untuk mencapai penyesuaian diri ialah: 1. Pasang komponen "skala-kotak" melalui arahan "npm install" atau "yarn add", dan gunakan "scale-. box" untuk mencapai penyesuaian diri. Dilengkapi dengan zum; 2. Sesuaikan dengan menetapkan nisbah piksel peranti; 3. Laraskan nisbah zum dengan menetapkan atribut zum melalui JS untuk mencapai penyesuaian.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi vue2&&vue3, komputer Dell G3.
Bolehkah vue menjadi adaptif?
Ya.
Penjelasan terperinci tentang tiga kaedah pelaksanaan penyesuaian skrin Vue
Atribut:
width
Lalai Lebar1920
height
Lalai Ketinggian1080
bgc
Lalai Warna latar belakang"transparent"
delay
Masa tunda anti-goncang penskalaan adaptif ( ms) Lalai 100
versi vue2: komponen penskalaan penyesuaian skrin besar vue2 (kotak skala vue2 - npm)
npm pasang vue2-scale-box
atau
benang tambah vue2-scale-box
Penggunaan:
<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>
versi vue3: komponen penskalaan penyesuaian skrin besar vue3 (kotak skala vue3 - npm)
npm pasang kotak skala vue3
atau
benang tambah vue3-skala-kotak
Penggunaan:
<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>
Buat fail devicePixelRatio.js baharu di bawah kegunaan projek
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;
Perkenalkan dalam App.vue dan Just gunakannya
<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>
Buat fail monitorZoom.js baharu di bawah utils projek
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; };
Perkenalkan dan gunakannya dalam 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); }
Dapatkan kod lengkap
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");
Peleraian skrin
Dapatkan lebar skrin:
window.screen.width * window.devicePixelRatio
Dapatkan ketinggian daripada skrin:
window.screen.height * window.devicePixelRatio
Penyesuaian terminal mudah alih (menggunakan pemalam postcss-px-to-viewport)
Tapak web rasmi: //m.sbmmt.com/link/2dd6d682870e39d9927b80f8232bd276
ataunpm pasang postcss-px-to-viewport< --save-dev >
tambah benang -D postcss-px-to-viewportKonfigurasikan parameter pemalam penyesuaian (buat . fail postcssrc.js dalam direktori akar projek [rata dengan direktori src] Tahap]) Tampal kod berikut
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 // 横屏时使用的视口宽度 } } };
tutorial video vue.js "
Atas ialah kandungan terperinci Bolehkah vue menjadi adaptif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!