«

vue能不能实现自适应

时间:2024-4-3 09:34     作者:韩俊     分类: Javascript


这篇文章主要讲解了“vue能不能实现自适应”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue能不能实现自适应”吧!

vue能实现自适应,其实现自适应的方法有:1、通过“npm install”或“yarn add”命令安装“scale-box”组件,并使用“scale-box”实现适配缩放;2、通过设置设备像素比例实现自适应;3、通过JS设置zoom属性调整缩放比例来实现自适应即可。

Vue屏幕自适应三种实现方法详解

使用 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 {
 /* 获取系统类型 */
 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;

在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 插件)

npm install postcss-px-to-viewport --save-dev

或者

yarn add -D postcss-px-to-viewport

配置适配插件的参数(在项目根目录创建 .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 // 横屏时使用的视口宽度
   }
 }
};

标签: javascript vue

热门推荐