当前位置：首页 > news >正文

大屏自适应终极方案：基于比例缩放的完美适配实践（Vue3版）

news 来源：原创 2025/9/16 21:08:04

需求背景

在数据可视化大屏开发中，我们常面临这样的挑战：如何让1920*1080的设计稿在不同分辨率设备上完美呈现？传统的响应式布局难以应对复杂的大屏元素排布，本文介绍一种基于CSS3变换的终极适配方案

实现思路

本方案的核心是动态比例缩放，通过以下关键步骤实现：

基准比例锁定：基于设计稿宽高比（16:9）建立基准比例
视口实时检测：通过resize事件监听窗口变化
智能比例判断：
- 当视口更宽时：保持高度基准，横向自适应
- 当视口更高时：保持宽度基准，纵向自适应
CSS变换应用：通过transform实现无损缩放

核心代码解析

let drawTiming = null; // 防抖定时器// 配置基准参数const baseWidth = 1920;const baseHeight = 1080;const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)); // 1.77778// * 默认缩放值const scale = {width: "1",height: "1",};// 动态计算逻辑function calcRate() {const appRef = document.querySelector(".content");const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));if (currentRate > baseProportion) {// 宽屏模式scale.width = (window.innerHeight * baseProportion) / baseWidth;scale.height = window.innerHeight / baseHeight;} else {// 高屏模式scale.height = window.innerWidth / baseProportion / baseHeight;scale.width = window.innerWidth / baseWidth;}appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;}//屏幕分辨路变化时候触发function resize() {clearTimeout(drawTiming);drawTiming = setTimeout(() => {calcRate();}, 200);}onMounted(() => {resize();window.addEventListener("resize", resize);});onBeforeUnmount(() => {window.removeEventListener("resize", resize);console.log("组件卸载");});

关键实现细节：

防抖处理：通过定时器实现200ms延迟计算，避免频繁重绘
精度控制：使用toFixed(5)确保计算精度，防止小数误差
居中定位：translate(-50%,-50%)配合父容器的position: relative实现完美居中
比例保持：通过动态调整scale的x/y轴实现不同比例下的完美适配

使用方法

在根组件中混入该模块
为容器元素添加ref="appRef"

父容器样式设置：

.parent-container {position: relative;width: 100vw;height: 100vh;overflow: hidden;
}.app-ref {position: absolute;left: 50%;top: 50%;transform-origin: 0 0;}

大屏自适应终极方案：基于比例缩放的完美适配实践（Vue3版）

需求背景在数据可视化大屏开发中，我们常面临这样的挑战：如何让1920*1080的设计稿在不同分辨率设备上完美呈现？传统的响应式布局难以应对复杂的大屏元素排布，本文介绍一种基于CSS3变换的终极适配方案实现思路本方案的核心是动…...

编程日记 2025/9/16 21:08:04

云计算中的API网关是什么？为什么它很重要？

在云计算架构中，API网关（API Gateway）是一个重要的组件，主要用于管理、保护和优化不同服务之间的接口（API）通信。简单来说，API网关就像是一个中介，它充当客户端和后端服务之间的“桥…...

编程日记 2025/9/16 21:03:56

前端ES面试题及参考答案

目录 let/const 与 var 的区别？TDZ 是什么？箭头函数与普通函数的区别？箭头函数能否作为构造函数？模板字符串的嵌套表达式和标签模板用法？解构赋值的应用场景及对象 / 数组解构差异？函数参数默认值的生效条件及暂时性死区问题？展开运算符（...）在数组 / 对象中…...

编程日记 2025/9/16 21:04:23

【架构思维基础：如何科学定义问题】

架构思维基础：如何科学定义问题一、问题本质认知 1.1 问题矛盾根据毛泽东《矛盾论》，问题本质是系统内部要素间既对立又统一的关系。例如： 电商系统矛盾演变： 90年代：商品供给不足 vs 消费需求增长00年代&#x…...

编程日记 2025/9/16 21:07:20

【网络安全】常见的web攻击

1、SQL注入攻击定义： 攻击者在HTTP请求中注入恶意的SQL代码，当服务器利用参数构建SQL语句的时候，恶意的SQL代码被一起构建,并在数据库中执行。示例： 用户登录： 输入用户名xx， 密码 or 1 …...

编程日记 2025/9/16 20:59:04

ECOLOGY流程表单字段由单行文本改成多行文本

用户需要把单行文本改成多行文本 1、数据库端处理 select lwnr from FORMTABLE_MAIN_237 where lwnr is not null FORMTABLE_MAIN_237 有记录。DESCRIBE OA.FORMTABLE_MAIN_237 LWNR VARCHAR2(999) 由999改成4000 ALTER TABLE OA.FORMTA…...

编程日记 2025/9/16 21:07:21

AI发展迅速，是否还有学习前端的必要性？

今天有个小伙伴跟我讨论：“现在 AI 发展迅速，是否还有学习 JS 或者 TS 及前端知识的必要？” 我非常肯定地说： 是的，学习 JavaScript/TypeScript 以及前端知识仍然非常必要，而且在可预见的未来，…...

编程日记 2025/9/16 21:07:24

视频的分片上传

分片上传需求分析： 项目中很多地方需要上传视频，如果视频很大，上传到服务器需要很多时间 ，这个时候体验就会很差。所以需要前端实现分片上传的功能。要实现分片上传，需要对视频进行分割，分割成不同的大小…...

编程日记 2025/9/16 21:05:40

pyside6学习专栏(二):程序图像资源的加载方式

pyside6中的QLabel控件可以加载图像和gif动画，可以直接从外部文件加载，也可以从QRC类型的文件(实际是一脚本文件)经编绎生成对应的资源.PY模块文件(就是将qrc文本中指定的资源文件的16制内容写入.py文件)来使用，本文对两种方式作了一简单的示…...

编程日记 2025/9/16 21:06:57

QQ登录测试用例报告

QQ登录测试用例思维导图一、安全性测试用例 1. 加密传输与存储验证测试场景：输入账号密码并提交登录请求。预期结果：账号密码通过加密传输（如HTTPS）与存储（如哈希加盐），无明文暴露。 2. 二…...

编程日记 2025/9/16 21:01:19

56. 合并区间 (LeetCode 热题 100)

题目来源： 56. 合并区间 - 力扣（LeetCode） 题目内容： 以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间，并返回一个不重叠的区间数组&am…...

编程日记 2025/9/10 13:17:12

冒泡排序（详解）c++

冒泡排序(Bubble Sort)也是⼀种简单的排序算法。它的⼯作原理是每次检查相邻两个元素，如果前⾯的元素与后⾯的元素满⾜给定的排序条件，就将相邻两个元素交换。当没有相邻的元素需要交换时， 排序就完成了。由于在算法的执⾏过程中&#xff0…...

编程日记 2025/9/16 0:29:49

CSS背景属性

<!DOCTYPE html> <html lang"zh-cn"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>CSS背景属性</title><style>.c1{/* …...

编程日记 2025/9/16 14:44:06

10种方法教你又小又清晰地压缩视频

视频压缩是有可能会损失画质的，但也可以通过一些方法尽量减少画质损失。在有效压缩视频大小的同时，尽量控制视频压缩画质在人眼无法察觉的范围内。下面就从10个角度向大家介绍10个不同的视频压缩方法，并推荐相关的视频压缩软件，整…...

编程日记 2025/9/14 13:43:29

当使用vcpkg安装的qt5时,在VS调用出现libcrypto-*-x64.dll不是有效路径时

英文解决站点 applocal.ps1 fails in Visual Studio 2019 because of wildcard path in VcpkgAppLocalDLLs Issue #28614 microsoft/vcpkg 虽然这个bug不影响生成exe文件,第一次会弹出该错误,再次运行就正常,vcpkg会把对应的libcrypto-*-x64.dll版本复制到exe路径下..但是对…...

编程日记 2025/9/13 6:43:39

AI大模型学习(四): LangChain(三)

Langchain构建代理语言模型本身无法执行动作,他们只能输出文本,代理是使用大型语言模型(LLM)作为推理引擎来确定要执行的操作以及这些操作的输入应该是什么,然后这些操作的结果可以反馈到代理中,代理将决定是否需要更多的操作,或者是否可以结束例如:我们想要查询现在北京的…...

编程日记 2025/9/14 3:01:06

JavaScript函数-arguments的使用

在JavaScript编程语言中，函数是构建复杂逻辑和实现代码复用的关键组件。虽然现代JavaScript（尤其是ES6及之后版本）提供了更多灵活的方式来处理函数参数（如剩余参数、默认参数等），但arguments对象仍然是一个…...

编程日记 2025/9/10 7:54:25

C# 从基础神经元到实现在0~9数字识别

训练图片:mnist160 测试结果:1000次训练学习率为0.1时,准确率在60%以上学习的图片越多，训练的时候越长(比如把 epochs*10 10000或更高时)效果越好 using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Windo…...

编程日记 2025/9/15 3:38:23

【每日八股】计算机网络篇（一）：概述

OSI 的 7 层网络模型？ OSI（Open Systems Interconnection，开放互联系统）是由国际标准化组织（ISO）提出的一种网络通信模型。自上而下，OSI 可以被分为七层，分别是：应用层…...

编程日记 2025/9/11 17:31:01

Jupyter里面的manim编程学习

1.Jupyterlab的使用因为我之前一直都是使用的vscode进行manim编程的，但是今天看的这个教程使用的是Jupyter，我也很是好奇这个manim在Jupyter这样的交互式下面会生成怎么样的效果，所以今天尝试了jupyter，并且对于两个进行比较和说…...

编程日记 2025/9/14 8:12:33

Web刷题之PolarDN（简单）

1.swp 考点：敏感文件、preg_match()函数绕过什么是swp文件： vim中的swp即swap文件，在编辑文件时产生，它是隐藏文件。这个文件是一个临时交换文件，用来备份缓冲区中的内容。如果原文件名是data，那么swp文件…...

编程日记 2025/9/15 0:32:59

JVM 深入理解与性能优化

JVM（Java Virtual Machine，Java 虚拟机）是 Java 代码运行的核心，它负责内存管理、类加载、字节码执行、垃圾回收（GC）和 JIT 编译。理解 JVM 有助于优化 Java 应用的性能，提高调试和排错能力。 …...

编程日记 2025/9/15 8:12:58

【人工智能】蓝耘智算平台盛大发布DeepSeek满血版：开创AI推理体验新纪元

📝个人主页🌹：Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ 蓝耘智算平台蓝耘智算平台核心技术与突破元生代推理引擎快速入门：三步调用大模型接口，OpenAI SDK无缝兼容实战用例文…...

编程日记 2025/8/24 20:37:59

minio作为K8S后端存储

docker部署minio mkdir -p /minio/datadocker run -d \-p 9000:9000 \-p 9001:9001 \--name minio \-v /minio/data:/data \-e "MINIO_ROOT_USERjbk" \-e "MINIO_ROOT_PASSWORDjbjbjb123" \quay.io/minio/minio server /data --console-address ":90…...

编程日记 2025/9/16 2:17:19

关于 BK3633 上电时受串口 UART2 影响而无法启动的问题说明

1. 问题描述 BK3633 SDK 版本：BK3633_DesignKit_V06_2310 使用 BK3633 UART2 与指纹模块进行通讯，为了降低功耗，通过 GPIO 控制了指纹模块的供电电源。但每次给整个系统板子上电时，BK3633 很大概率会实际而无法正常运行程序&…...

编程日记 2025/9/13 20:55:52

运维Ansible面试题及参考答案

目录简述 Ansible 的工作原理，它是如何实现对远程主机管理的？ Ansible 是基于什么语言开发的？这门语言的特性对 Ansible 的功能实现有哪些帮助？解释 Agentless 在 Ansible 中的含义，与基于 Agent 的自动化工具相比，优势体现在哪？ Ansible 中的 Inventory 文件是什…...

编程日记 2025/9/12 8:09:00

Spring Boot 日志管理（官网文档解读）

摘要本篇文章详细介绍了SpringBoot 日志管理相关的内容，文章主要参考官网文章的描述内容，并在其基础上进行一定的总结和拓展，以方便学习Spring Boot 的小伙伴能快速掌握Spring Boot 日志管理相关的内容。日志实现方式 Sping Boot 的日志管…...

编程日记 2025/9/10 10:56:43

Svelte 最新中文文档教程（17）—— 生命周期钩子

前言 Svelte，一个语法简洁、入门容易，面向未来的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1： Svelte 以…...

编程日记 2025/9/14 19:16:02

Windows 上源码安装 FastGPT

FastGPT 是一个强大的 AI RAG 平台，值得我们去学习了解。与常见的 Python 体系不同，Fast GPT 采用 Node.js/Next.js 平台（对于广大 JS 开发者或前端开发者比较亲切友好），安装或部署比较简单。虽然一般情况下推荐简单的…...

编程日记 2025/9/11 20:01:51

RT-Thread+STM32L475VET6——icm20608传感器

文章目录前言一、板载资源二、具体步骤1.打开CubeMX进行配置1.1 使用外部高速时钟，并修改时钟树1.2 打开I2C3，参数默认即可(I2C根据自己需求调整）1.3 打开串口1.4 生成工程 2. 添加icm20608软件包3. 使能传感器，打开动态链接库4.…...

编程日记 2025/9/10 19:46:15

超高清大图渲染性能优化实战：从页面卡死到流畅加载

目录问题背景：1.为什么大图会导致页面卡死？一、DOM树构建（HTML Parsing）二、资源加载：下载完整图片文件（可能高达30MB）三、解码处理（Decoding & Rasterization）、四…...

编程日记 2025/9/10 14:13:04

基于javaweb的SpringBoot个人博客系统设计和实现(源码+文档+部署讲解）

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…...

编程日记 2025/9/10 1:41:53

轻量级日志管理平台Grafana Loki

文章目录轻量级日志管理平台Grafana Loki背景什么是Loki为什么使用 Grafana Loki？架构Log Storage Grafana部署使用基于 Docker Compose 安装 LokiMinIO K8s集群部署Loki采集Helm 部署方式和案例参考轻量级日志管理平台Grafana Loki 背景在微服务以及云原生时…...

编程日记 2025/9/15 2:20:42

SOME/IP--协议英文原文讲解12（完结）

前言 SOME/IP协议越来越多的用于汽车电子行业中，关于协议详细完全的中文资料却没有，所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块： 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 4.3 Compa…...

编程日记 2025/9/14 21:07:31

Linux 命令大全完整版（12）

Linux 命令大全 5. 文件管理命令 ln(link) 功能说明：连接文件或目录。语　　法：ln [-bdfinsv][-S <字尾备份字符串>][-V <备份方式>][--help][--version][源文件或目录][目标文件或目录] 或 ln [-bdfinsv][-S <字尾备份字符串>][-V…...

编程日记 2025/9/13 12:44:14

AI学习第二，三天-Python基础

变量、运算符与数据类型详解注释在 Python 中，注释是用于增加代码可读性、解释代码功能但不会被程序执行的部分。单行注释：使用 # 符号，从 # 开始到本行末尾的内容均为注释。例如： 收起 python # 这是一个单行注释&#xff…...

编程日记 2025/9/14 9:47:40

Nginx代理ElasticSearch

1、将ES的账号:密码通过Base64加密假设账号密码如下： 账号：elastic密码：elastichuayunworld.com echo -n elastic:elastichuayunworld.com | base64 ZWxhc3RpYzplbGFzdGljQGh1YXl1bndvcmxkLmNvbQ2、在 Nginx 配置中传递认证信息 locatio…...

编程日记 2025/9/15 6:08:36

开源AI网络爬虫工具Crawl4AI

引言在信息化时代，网络爬虫作为从互联网中提取信息的重要工具，扮演着至关重要的角色。Crawl4AI作为一款开源AI网络爬虫工具，凭借其功能强大和易用性，受到了广泛关注。本文将详细探讨Crawl4AI的定义、特点、优势，以及…...

编程日记 2025/9/16 20:46:01

实现 INFINI Console 与 GitHub 的单点登录集成：一站式身份验证解决方案

本文将为您详细解析如何通过 GitHub OAuth 2.0 协议，为 INFINI Console 实现高效、安全的单点登录（Single Sign-On, SSO）集成。通过此方案，用户可直接使用 GitHub 账户无缝登录 INFINI Console，简化身份验证流程&#…...

编程日记 2025/9/14 1:10:33

Linux系统安装MySQL5.7（其他版本类似）避坑指南

1.远程连接在Linux系统安装好MySQL5.7数据库，不要以为就大功告成了后面还有大坑等着你踩了。宏哥这里介绍一下远程连接遇到的坑以及如何处理。由于征文要求安装环境教学除外宏哥这里就不介绍在Linux系统安装mysql数据库，有需要的可以自己百度一下。但是…...

编程日记 2025/9/14 6:57:19

新数据结构(12)——代理

什么是代理在进行操作时有时不希望用户直接接触到目标，这时需要使用代理让用户间接接触到目标给目标对象提供一个代理对象，并且由代理对象控制着对目标对象的引用图解： 代理的目的控制访问：通过代理对象的方式间接的访问目…...

编程日记 2025/9/12 5:57:42

VLM（视觉语言模型）与DeepSeek R1（奖励机制）如何结合

VLM（视觉语言模型）与DeepSeek R1（奖励机制）如何结合 flyfish VLM的传统训练依赖于监督学习（直接拟合问答对），而规则奖励函数通常用于强化学习（通过试错和奖励反馈优化策略&#xf…...

编程日记 2025/9/12 7:04:32

问题：Flask应用中的用户会话(Session)管理失效

我来分享一个常见的PythonWeb开发问题： 问题：Flask应用中的用户会话(Session)管理失效这是一个在Flask开发中经常遇到的问题。当用户登录后，有时会话会意外失效，导致用户需要重复登录。解决方案： 1. 首先&#x…...

编程日记 2025/9/12 8:43:12

Qt/C++面试【速通笔记一】

Qt 信号与槽机制什么是信号（Signal）和槽（Slot）？ 在Qt中，信号（Signal）和槽（Slot）是实现对象之间通信的一种机制。信号是对象在某些事件发生时发出的通知&…...

编程日记 2025/9/10 10:21:26

RoCBert：具有多模态对比预训练的健壮中文BERT

摘要大规模预训练语言模型在自然语言处理（NLP）任务上取得了最新的最优结果（SOTA）。然而，这些模型容易受到对抗攻击的影响，尤其是对于表意文字语言（如中文）。在本研究中&#xff0…...

编程日记 2025/9/10 1:41:55

DeepSeek入门到大师清华大学[1-5版]全集

1、文件概览 1、清华大学《DeepSeek:从入门到精通》 2、清华大学《Deepseek如何赋能职场应用?》 3、清华大学《普通人如何抓住DeepSeek红利》 4、清华大学《DeepSeekDeepResearch让科研像聊天一样简单》 5、清华大学《DeepSeek与AI幻觉》 6、天津大学《深度解读Deepseek:原理…...

编程日记 2025/9/15 10:10:58

Debezium：实时数据捕获与同步的利器

一、什么是 Debezium Debezium 是一个开源的分布式平台，专门用于捕获数据库中的数据变更。它通过读取数据库的事务日志，能够以非侵入性的方式捕获数据库中发生的所有变化，并将这些变化转化为事件流，实时推送到像 Kafka 这样的消息…...

编程日记 2025/9/3 4:34:19

【蓝桥杯】第十五届省赛大学真题组真题解析

【蓝桥杯】第十五届省赛大学真题组真题解析一、智能停车系统 1、知识点 （1）flex-wrap 控制子元素的换行方式属性值有： no-wrap不换行wrap伸缩容器不够则自动往下换行wrap-reverse伸缩容器不够则自动往上换行 （2&#xff0…...

编程日记 2025/9/11 12:42:01

AI助力下的PPT革命：DeepSeek 与Kimi的高效创作实践

清华大学出品《DeepSeek：从入门到精通》分享在忙碌的职场中，制作一份高质量的PPT往往需要投入大量时间和精力，尤其是在临近截止日期时。今天，我们将探索如何借助 AI 工具 —— DeepSeek 和 Kimi —— 让 PPT 制作变得既快捷又高…...

编程日记 2025/9/13 11:53:11

【MySQL篇】持久化和非持久化统计信息的深度剖析(含analyze命令和mysqlcheck工具两种收集方式)

💫《博主介绍》：✨又是一天没白过，我是奈斯，从事IT领域✨ 💫《擅长领域》：✌️擅长阿里云AnalyticDB for MySQL(分布式数据仓库)、Oracle、MySQL、Linux、prometheus监控；并对SQLserver、NoSQL(…...

编程日记 2025/9/15 5:04:05

需求背景

实现思路

核心代码解析

关键实现细节：

使用方法

相关文章：