位置: IT常识 - 正文

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

编辑:rootadmin
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-boxvue 项目的屏幕自适应方案(vue display)

使用方法:

<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 // 横屏时使用的视口宽度 } }};
本文链接地址:https://www.jiuchutong.com/zhishi/298547.html 转载请保留说明!

上一篇:Vue3父子组件间传参通信(vue父组件子组件)

下一篇:Vue3 中 axios 的安装及使用(vue3+antd)

  • 中国人寿发起首单保险资管权益类资产支持计划

    中国人寿发起首单保险资管权益类资产支持计划

  • 三星Galaxy Note 20 Ultra 5g版屏幕尺寸是多少

    三星Galaxy Note 20 Ultra 5g版屏幕尺寸是多少

  • 打印盒设置错误(打印机打印盒设置错误)

    打印盒设置错误(打印机打印盒设置错误)

  • 小米8关闭内容中心(小米关闭内容资讯)

    小米8关闭内容中心(小米关闭内容资讯)

  • 华为手机怎么重新启动电话(华为手机怎么重置手机出厂设置)

    华为手机怎么重新启动电话(华为手机怎么重置手机出厂设置)

  • 补办手机卡是原号码吗(补办手机卡原来的微信还有吗)

    补办手机卡是原号码吗(补办手机卡原来的微信还有吗)

  • a59m是全网通手机吗(手机a59m)

    a59m是全网通手机吗(手机a59m)

  • 制作芯片的机器叫什么(制作芯片的机器设备有哪些?)

    制作芯片的机器叫什么(制作芯片的机器设备有哪些?)

  • 手机视频有回音和杂音是怎么办(手机视频有回音怎么处理掉)

    手机视频有回音和杂音是怎么办(手机视频有回音怎么处理掉)

  • 苹果电脑黑屏打不开(苹果电脑黑屏打不开 强制也开不了机)

    苹果电脑黑屏打不开(苹果电脑黑屏打不开 强制也开不了机)

  • 腾讯视频怎么调亮度(腾讯视频怎么调画质)

    腾讯视频怎么调亮度(腾讯视频怎么调画质)

  • iphone删除照片后储存空间没变(iPhone删除照片后还能恢复吗)

    iphone删除照片后储存空间没变(iPhone删除照片后还能恢复吗)

  •  vrio是什么意思(vro是什么意思的缩写)

    vrio是什么意思(vro是什么意思的缩写)

  • ipad pro二代上市时间(ipad pro二代是什么时候上市的)

    ipad pro二代上市时间(ipad pro二代是什么时候上市的)

  • 手机照片命名怎么弄(手机照片命名怎么改名字)

    手机照片命名怎么弄(手机照片命名怎么改名字)

  • p40什么时候上市的(红米p40什么时候上市)

    p40什么时候上市的(红米p40什么时候上市)

  • 淘宝特别关注怎么弄(淘宝里特别关注的怎么看不到了)

    淘宝特别关注怎么弄(淘宝里特别关注的怎么看不到了)

  • 打印机拒绝访问是什么问题(打印机拒绝访问无法连接怎么办)

    打印机拒绝访问是什么问题(打印机拒绝访问无法连接怎么办)

  • 蘑菇钉签到位置能改吗(蘑菇钉签到位置改了,老师那边能查出来吗,有问题吗)

    蘑菇钉签到位置能改吗(蘑菇钉签到位置改了,老师那边能查出来吗,有问题吗)

  • 电话语音记录怎么查(手机语音通话记录)

    电话语音记录怎么查(手机语音通话记录)

  • 怎么强制关掉学生模式(怎么强制关掉学校的网络)

    怎么强制关掉学生模式(怎么强制关掉学校的网络)

  • 安全手机号什么意思(安全手机号是啥)

    安全手机号什么意思(安全手机号是啥)

  • 微信运动数据来源怎么删除(微信运动数据来源搜索不到设备)

    微信运动数据来源怎么删除(微信运动数据来源搜索不到设备)

  • 微信里如何永久删除视频(微信里如何永久删除健康码)

    微信里如何永久删除视频(微信里如何永久删除健康码)

  • 如何修复 Win10 上的“默认网关不可用”错误?(如何修复win10开机转圈五分钟)

    如何修复 Win10 上的“默认网关不可用”错误?(如何修复win10开机转圈五分钟)

  • 什么是印花税的税目
  • 个人独资企业是有限责任还是无限责任
  • 全面一次性奖金收入扣税标准
  • 进项抵扣税率是多少
  • 转登记纳税人留抵退税政策
  • 什么合同不需要做结算
  • 代开增值税票普票专票税点一样吗
  • 固定资产不能抵扣进项税额
  • 工程未完工但已开票
  • 银行缴纳印花税的范围
  • 为什么报税资料老是显示有
  • 单位参加城镇职工基本养老保险基数怎么填
  • 哪些情况下不就地分摊缴纳企业所得税?
  • 年末提取盈余公积的会计分录怎么写
  • 多交增值税如何做账
  • 腾讯电脑管家怎么修复dll
  • vb win10
  • 低值易耗品包括哪些内容?属于什么科目?
  • 增值税明细账怎么登记
  • 增值税预缴税款表电子版下载
  • linux系统的
  • PHP:oci_num_rows()的用法_Oracle函数
  • php语法和常用的函数
  • php array_search() 函数使用
  • linux root 命令
  • 归属性质
  • 销售折扣增值税如何处理
  • php基于SQLite实现的分页功能示例
  • 建筑公司内账复杂吗
  • 老生常谈含义
  • framework在哪里打开
  • 收到投资款的会计科目怎么入账
  • 深度学习实战(十):使用 PyTorch 进行 3D 医学图像分割
  • seaborn库的特点
  • 发票待开是什么意思?
  • python的pillow库如何安装
  • jsp页面构成
  • 个人完税证明有什么用途
  • 无形资产和固定资产减值准备可以转回吗
  • 帝国cms会员注册天数自动升级会员组
  • 租入的房屋转租是否交房产税
  • 存货跌价准备怎么核算
  • 申报企业所得税会计分录怎么写
  • 未使用的机器设备有没有实体性贬值
  • 购买产品样品计入什么科目
  • 直接计入当期利润吗
  • 短期借款利息的使用账户是
  • 帮别人加工需要什么手续
  • 原材料采购未入库会计分录
  • 其他应付款贷方表示什么意思
  • 养老院的账务处理会计实务问答
  • 企业清算的会计处理
  • win8 联网
  • 如何创建mac系统安装盘
  • mac怎么玩电脑游戏
  • linux忘记root密码怎么修改
  • csrss.exe是什么进程 2个
  • 硬盘格式 mac
  • 如何配置linux
  • windows createfile
  • macbookair文档怎么变成word
  • linux安装与基本命令
  • 怎么有才能
  • win8创建我的电脑
  • linux 截屏
  • linux系统的配置
  • win10 outlook邮箱设置教程
  • win8玩游戏
  • dosbox批处理
  • jquery fadein 源码
  • Vuforia unity3d 发布 eclipse工程
  • nodejs开发博客
  • node.js web
  • unity如何动态刷新滚动列表
  • html复选框和单选框区别在哪
  • unity3d 脚本
  • jquery瀑布流代码
  • jquery的form方法
  • 税务局发票邮寄需要多久
  • 河南工商年检网上申报APP
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设