vue 项目的屏幕自适应方案(vue display)

vue 项目的屏幕自适应方案 方案一：使用 scale-box 组件

推荐整理分享vue 项目的屏幕自适应方案(vue display)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue display,vue做大屏,vue大屏展示项目实例,vue全屏显示,vue全屏显示,vue大屏展示项目实例,vue大屏展示项目实例,vue 大屏显示,内容如对您有帮助，希望把文章链接给更多的朋友！

属性：

width 宽度 默认 1920height 高度 默认 1080bgc 背景颜色 默认 "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 插件）

官网：https://github.com/evrone/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 // 横屏时使用的视口宽度 } }};