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.mzph.cn/bicheng/39253.shtml

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

相关文章

入门PHP就来我这(纯干货)04

~~~~ 有胆量你就来跟着路老师卷起来&#xff01; -- 纯干货&#xff0c;技术知识分享 ~~~~ 路老师给大家分享PHP语言的知识了&#xff0c;旨在想让大家入门PHP&#xff0c;并深入了解PHP语言。 我们接着《想入门PHP就来我这&#xff08;纯干货&#xff09;03》继续往下学习&am…

安装Rabbitmq遇到的坑

&#xff01;&#xff01;&#xff01;一定要对号版本号 不同的虚拟机unbontu、cetenos和不同的erlang和不同的rabbitmq之间要对应下载对应版本 下面给出我的版本centos7erlangrabbitmq 分割线 安装好后&#xff0c;如果在虚拟机的服务器上可以打开&#xff0c;在本地浏览器…

JavaScript中的Array(数组)对象

目录 一、Array数组对象 1、介绍 2、创建数组对象并赋值 3、访问数组元素 二、Array对象属性 1、constructor属性 2、length属性 3、prototype属性 三、Array对象的常用方法 1、isArray() 2、concat() 3、pop() 4、shift() 5、push() 6、unshift() 7、reverse(…

压缩算法LZW

LZW算法 步骤如下&#xff1a; 初始化字典&#xff1a;创建一个初始字典&#xff0c;其中包含所有可能的输入符号。 输入处理&#xff1a;读取输入数据&#xff0c;并将第一个输入符号作为当前模式。 模式匹配和字典更新&#xff1a;从输入中读取下一个符号&#xff0c;并将…

高性价比宠物空气净化器分享,希喂、霍尼韦尔、有哈PK

近期&#xff0c;家中的小猫咪仿佛化身为行走的“蒲公英”&#xff0c;掉毛现象愈发严重&#xff0c;家中每个角落乃至空气中都弥漫着难以忽视的猫毛&#xff0c;衣物更是无一幸免&#xff0c;披上了毛茸茸的“外衣”。更令人啼笑皆非的是&#xff0c;就连不经意间清理的眼屎中…

React 组件 API

React 组件 API React 组件 API 是 React 应用程序开发中的核心部分&#xff0c;它提供了一系列的接口和方法&#xff0c;使得开发者能够创建和管理组件的状态、属性以及生命周期。在本篇文章中&#xff0c;我们将深入探讨 React 组件 API 的各个方面&#xff0c;包括组件的定…

VQA视觉问答系统

这是一个典型的多模态问题,融合了CV与NLP的技术,计算机需要同时学会理解图像和文字。 Joint embedding 首先,图像和问题分别由CNN和RNN进行第一次编码得到各自的特征,随后共同输入到另一个编码器中得到joint embedding,最后通过解码器输出答案。 值得注意的是,有的工作…

k8s 答疑

1 如何修复容器中的 top 指令以及 /proc 文件系统中的信息呢? 这段自问自答的内容解释了如何通过使用 lxcfs 来修复 Docker 容器中 top 指令和 /proc 文件系统中的信息。让我们分步骤来详细说明: 背景信息 在容器化环境中,通常会遇到一个问题,即容器中的一些命令(如 to…

Java核心技术【十八】Java集合框架精讲:List、Set、Map

Java集合框架精讲&#xff1a;List、Set、Map的使用详解与代码示例 Java集合框架是Java编程中不可或缺的一部分&#xff0c;它提供了一系列容器类&#xff0c;用于存储和操作不同类型的数据集。在Java集合框架中&#xff0c;List、Set和Map是最常用的三种集合类型&#xff0c;…

小红书运营教程02

小红书大致会分享10篇左右。微博、抖音、以及视频剪辑等自媒体运营相关技能以及运营教程相关会陆续的进行分享。 上次分享涉及到的对比,母婴系列,或者可以说是服装类型,不需要自己过多的投入,对比知识类博主来说,自己将知识讲述出来,然后要以此账号进行变现就比较麻烦,…

道可云元宇宙每日资讯|山东出台人形机器人产业发展路线

道可云元宇宙每日简报&#xff08;2024年7月1日&#xff09;讯&#xff0c;今日元宇宙新鲜事有&#xff1a; 山东出台人形机器人产业发展路线 近期&#xff0c;山东省工业和信息化厅等部门印发《山东省促进人形机器人产业创新发展实施方案&#xff08;2024—2027年&#xff0…

如果这时你还不清理C盘,那只能眼睁睁看着电脑越来越卡 直到系统崩溃

如果这时候你还不清理C盘&#xff0c;那只能眼睁睁看着电脑越来越卡 直到系统崩溃。很多人就是想偷懒&#xff0c;当然这是人的天性&#xff0c;明明知道自己的C盘空间就那么大&#xff0c;一天天看着C盘空间越来越小&#xff0c;还不去清理C盘。 这样的人有两种&#xff0c;一…

CesiumJS【Basic】- #048 绘制闪烁线(Primitive方式)

文章目录 绘制闪烁线(Primitive方式)- 需要自定义着色器1 目标2 代码2.1 main.ts绘制闪烁线(Primitive方式)- 需要自定义着色器 1 目标 使用Primitive方式绘制闪烁线 2 代码 2.1 main.ts import * as Cesium from cesium;const viewer = new Cesiu

软件开发案例参考

前言&#xff1a;基于平台现有需求进行新功能模块开发与实现&#xff0c;以下内容为部分源码解析&#xff0c;仅提供一些思路参考&#xff0c;不予以客观指导&#xff0c;毕竟条条大路通罗马嘛&#xff1b; 语言&#xff1a;C# 工具&#xff1a;visual studio 2017/visual st…

【MySQL List插入】MySQL List格式数据插入

其中id为对应的函数名&#xff0c;useGeneratedKeys是否主键自动生成&#xff0c;keyProperty主键关联的属性。 <foreach collection"list" item"element" index"index" separator",">确定集合类型&#xff0c;item每个元素表示…

C++基础(二):C++入门(一)

C是在C的基础之上&#xff0c;容纳进去了面向对象编程思想&#xff0c;并增加了许多有用的库&#xff0c;以及编程范式 等。熟悉C语言之后&#xff0c;对C学习有一定的帮助&#xff0c;本篇博客主要目标&#xff1a; 1. 补充C语言语法的不足&#xff0c;以及C是如何对C语言设计…

【RabbitMQ实战】邮件发送(直连交换机、手动ack)

一、实现思路 二、异常情况测试现象及解决 说明:本文涵盖了关于RabbitMQ很多方面的知识点, 如: 消息发送确认机制 、消费确认机制 、消息的重新投递 、消费幂等性, 二、实现思路 1.简略介绍163邮箱授权码的获取 2.编写发送邮件工具类 3.编写RabbitMQ配置文件 4.生产者发起调用…

高考失利咨询复读,银河补习班客服开挂回复

补习班的客服在高考成绩出来后&#xff0c;需要用专业的知识和足够的耐心来回复各种咨询&#xff0c;聊天宝快捷回复软件&#xff0c;帮助客服开挂回复。 ​ 前言 高考成绩出来&#xff0c;几家欢喜几家愁&#xff0c;对于高考失利的学生和家长&#xff0c;找一个靠谱的复读补…

全面了解机器学习

目录 一、基本认识 1. 介绍 2. 机器学习位置 二、机器学习的类型 1. 监督学习 2. 无监督学习 3. 强化学习 三、机器学习术语 1. 训练样本 2. 训练 3. 特征 4. 目标 5. 损失函数 四、机器学习流程 五、机器学习算法 1. 分类算法 2. 聚类算法 3. 关联分析 4. …

Qt入门教程(一):Qt使用的基本知识

目录 Qt简介 新建项目 构建目录和工作目录 构建目录 工作目录 项目结构 项目配置文件 .pro 用户文件 .user 主文件 main.cpp 头文件 dialog.h 源文件 dialog.cpp 帮助文档 三种查询文档的方式&#xff1a; 文档的重点位置&#xff1a;​编辑 调试信息 Qt简介 Qt…