Vue 数据大屏适配

1、准备俩个盒子

.dataScreen-content 盒子内容根据设计稿给的px单位进行正常的布局就行

2、盒子的CSS样式

.dataScreen-container {width: 100%;height: 100%;// 有背景图需要的样式background: url("./images/bg.png") no-repeat;background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-size: 100% 100%;background-size: cover;.dataScreen-content {position: fixed;top: 50%;left: 50%;z-index: 999;display: flex;flex-direction: column;overflow: hidden;transition: all 0.3s;transform-origin: left top;}
}

3、监听屏幕大小针对元素进行缩放,并始终保持居中时。

这里假设设计稿的比例是:1920px / 1080px

const dataScreenRef = ref<HTMLElement | null>(null);onMounted(() => {if (dataScreenRef.value) {dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;dataScreenRef.value.style.width = `1920px`;dataScreenRef.value.style.height = `1080px`;}// 添加窗口大小变化监听器window.addEventListener("resize", resize);
});// 设置响应式
const resize = () => {if (dataScreenRef.value) {dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;}
};// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {let ww = window.innerWidth / width;let wh = window.innerHeight / height;return ww < wh ? ww : wh;
};// 退出页面时移除
onBeforeUnmount(() => {window.removeEventListener("resize", resize);
});

3.1、添加窗口大小变化监听器

3.2、根据窗口的宽度和高度给定的基准宽度和高度(默认为 1920x1080)计算缩放比例,并返回较小的比例值,以确保元素在水平和垂直方向上都不会超出视口

3.3、返回较小的缩放比例的目的是为了保证元素在视口完整显示,不会因为在某一维度上缩放过大而导致元素在另一维度上超出视口。如果返回较大的缩放比例,那么元素可能会在某一维度上超出视口,这在很多情况下是不希望发生的。

4、效果图如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/370283.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

推荐算法学习笔记2.1:基于深度学习的推荐算法-基于共线矩阵的深度推荐算法-AutoRec模型

AutoRec模型 前置知识&#xff1a;推荐算法学习笔记1.1:传统推荐算法-协同过滤算法 AutoRec模型通过引入自编码器结构&#xff0c;将共线矩阵中的用户向量&#xff08;基于用户的U-AutoRec&#xff09;或物品向量&#xff08;基于物品的I-AutoRec&#xff09;嵌入到低维空间后还…

在 PostgreSQL 中,如何处理大规模的文本数据以提高查询性能?

文章目录 一、引言二、理解 PostgreSQL 中的文本数据类型三、数据建模策略四、索引选择与优化五、查询优化技巧六、示例场景与性能对比七、分区表八、数据压缩九、定期维护十、总结 在 PostgreSQL 中处理大规模文本数据以提高查询性能 一、引言 在当今的数据驱动的世界中&…

HashMap中的put()方法

一. HashMap底层结构 HashMap底层是由哈希表(数组),链表,红黑树构成,哈希表存储的类型是一个节点类型,哈希表默认长度为16,它不会每个位置都用,当哈希表中的元素个数大于等于负载因子(0.75)*哈希表长度就会扩容到原来的2倍 二. 底层的一些常量 三. HashMap的put()方法 当插入一…

Linux 系统管理4——账号管理

一、用户账号管理 1、用户账号概述 &#xff08;1&#xff09;用户账号的常见分类&#xff1a; 1>超级用户&#xff1a;root uid0 gid0 权限最大。 2>普通用户&#xff1a;uid>500 做一般权限的系统管理&#xff0c;权限有限。 3>程序用户&#xff1a;1<uid&l…

3.python

闯关 3作业 本节关卡&#xff1a; 学习 python 虚拟环境的安装 Python 的基本语法 学会 vscode 远程连接 internstudio 打断点调试 python 程序

生物化学笔记:电阻抗基础+电化学阻抗谱EIS+电化学系统频率响应分析

视频教程地址 引言 方法介绍 稳定&#xff1a;撤去扰动会到原始状态&#xff0c;反之不稳定&#xff0c;还有近似稳定的 阻抗谱图形&#xff08;Nyquist和Bode图&#xff09; 阻抗谱图形是用于分析电化学系统和材料的工具&#xff0c;主要有两种类型&#xff1a;Nyquist图和B…

Drools开源业务规则引擎(三)- 事件模型(Event Model)

文章目录 Drools开源业务规则引擎&#xff08;三&#xff09;- 事件模型&#xff08;Event Model&#xff09;1.org.kie.api.event2.RuleRuntimeEventManager3.RuleRuntimeEventListener接口说明示例规则文件规则执行日志输出 4.AgentaEventListener接口说明示例监听器实现类My…

Java 7新特性深度解析:提升效率与功能

文章目录 Java 7新特性深度解析&#xff1a;提升效率与功能一、Switch中添加对String类型的支持二、数字字面量的改进三、异常处理&#xff08;捕获多个异常&#xff09;四、增强泛型推断五、NIO2.0&#xff08;AIO&#xff09;新IO的支持六、SR292与InvokeDynamic七、Path接口…

WordPress网站添加插件和主题时潜在危险分析

WordPress 最初只是一个简单的博客软件&#xff0c;现在据估计为全球前 1000 万个网站中的 30% 提供支持。WordPress受欢迎的因素之一是可以轻松创建插件和主题来扩展它并提供比默认设置更多的功能。 目前&#xff0c;WordPress 网站列出了 56,000 多个插件以及数千个主题。插件…

DatawhaleAI夏令营2024 Task2

#AI夏令营 #Datawhale #夏令营 赛题解析一、Baseline详解1.1 环境配置1.2 数据处理任务理解2.3 prompt设计2.4 数据抽取 二、完整代码总结 赛题解析 赛事背景 在数字化时代&#xff0c;企业积累了大量对话数据&#xff0c;这些数据不仅是交流记录&#xff0c;还隐藏着宝贵的信…

python读取csv出错怎么解决

Python用pandas的read_csv函数读取csv文件。 首先&#xff0c;导入pandas包后&#xff0c;直接用read_csv函数读取报错OSError&#xff0c;如下&#xff1a; 解决方案是加上参数&#xff1a;enginepython。 运行之后没有报错&#xff0c;正在我欣喜之余&#xff0c;输出一下d…

linux 服务器数据备份 和 mysql 数据迁移

查看域名ip 查看程序所处文件位置 list open files 1、 lsof -i :port 查看端口获取进程 pid 2、lsof -i pid 1、scp 下载服务器文件到本地 security copy protocol 2、导出服务器 mysql 数据库&#xff08;表&#xff09;到本地 mysqldump是MySQL自带的一个实用程序&…

CentOS 7.9 停止维护(2024-6-30)后可用在线yum源 —— 筑梦之路

众所周知&#xff0c;centos 7 在2024年6月30日&#xff0c;生命周期结束&#xff0c;官方不再进行支持维护&#xff0c;而很多环境一时之间无法完全更新替换操作系统&#xff0c;因此对于yum源还是需要的&#xff0c;特别是对于互联网环境来说&#xff0c;在线yum源使用方便很…

207 课程表

题目 你这个学期必须选修 numCourses 门课程&#xff0c;记为 0 到 numCourses - 1 。 在选修某些课程之前需要一些先修课程。 先修课程按数组 prerequisites 给出&#xff0c;其中 prerequisites[i] [ai, bi] &#xff0c;表示如果要学习课程 ai 则 必须 先学习课程 bi 。 …

Qt5.9.9 关于界面拖动导致QModbusRTU(QModbusTCP没有测试过)离线的问题

问题锁定 参考网友的思路&#xff1a; Qt5.9 Modbus request timeout 0x5异常解决 网友认为是Qt的bug&#xff0c; 我也认同&#xff1b;网友认为可以更新模块&#xff0c; 我也认同&#xff0c; 我也编译了Qt5.15.0的code并成功安装到Qt5.9.9中进行使用&#xff0c;界面拖…

51单片机嵌入式开发:3、STC89C52操作8八段式数码管原理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 STC89C52操作8八段式数码管原理 1 8位数码管介绍1.1 8位数码管概述1.2 8位数码管原理1.3 应用场景 2 原理图图解2.1 74HC573原理2.2 74HC138原理2.3 数码管原理 3 数码管程序…

树模型详解2-GBDT算法

与adaboost一样&#xff0c;GBDT也是采用前向分步算法&#xff0c;只是它会用决策树cart算法作为基学习器&#xff0c;因此先要从分类树和回归树讲起 决策树-提升树-梯度提升树 决策树cart算法 回归树&#xff1a;叶子结点的值是所有样本落在该叶子结点的平均值 如何构建&a…

【绿色版】Mysql下载、安装、配置与使用(保姆级教程)

大家都知道&#xff0c;Mysql安装版的卸载过程非常繁琐&#xff0c;而且卸载不干净会出现许多问题&#xff0c;很容易让大家陷入重装系统的窘境。基于此&#xff0c;博主今天给大家分享绿色版Mysql的安装、配置与使用。 目录 一、Mysql安装、配置与使用 1、下载解压 2、创建…

zabbix 配置钉钉告警

1.申请一个钉钉企业版 2.群内申请一个机器人 下载电脑版钉钉&#xff0c;登录后&#xff0c;在要接收群消息的群里&#xff0c;点击右上角设置图标&#xff0c;下滑找到机器人&#xff0c;添加一个机器人&#xff0c;保存机器人的webhook地址 保存这里的加签字符串 保存这里的…

深度网络现代实践 - 深度前馈网络之反向传播和其他的微分算法篇

序言 反向传播&#xff08;Backpropagation&#xff0c;简称backprop&#xff09;是神经网络训练过程中最关键的技术之一&#xff0c;尤其在多层神经网络中广泛应用。它是一种与优化方法&#xff08;如梯度下降法&#xff09;结合使用的算法&#xff0c;用于计算网络中各参数的…