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

前端大屏自适应缩放

news 2026/2/9 0:08:06

简介

前端中大屏往往用于展示各种炫酷的界面和特效，因此特别受用好欢迎。
但是在开发过程中，常常也会出现各种问题，与一般的页面相比，
最让人头疼的是大屏的自适应问题。

使用CSS中transform属性和js获取缩放比例方法

	先简单写一下网页，先画一个大盒子container，再画自适应大屏盒子box，
再box中就是我们测试的两个小盒子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="container"><!-- 数据展示的区域 --><div class="box"><div class="top">我是top部分，2035年实现基本社会主义现代化</div><div class="bottom">我是bottom部分，
2050年实现第二个一百年奋斗目标，全面建成富强民主文明和谐美丽的社会主义现代化强国</div></div></div>
</body>
</html>

接着我们开始写css部分，主要用到vw和vh这两个属性单位和transform属性

* {margin: 0;padding: 0;}/* 大屏盒子box 使用fixed定位，将屏幕的尺寸设置为宽高 并通过 transform-origin: left top将变换的基点设置为屏幕左上角*/.container {width: 100vw;height: 100vh;background: url(./bg.png) no-repeat;background-size: cover;}.box {position: fixed;width: 1920px;height: 1080px;background: red;transform-origin: left top;left: 50%;top: 50%;}.top {width: 100px;height: 100px;background: hotpink;margin-left: 50px;}.bottom {width: 100px;height: 100px;background: skyblue;margin-left: 50px;margin-top: 100px;}

接着写js，通过resize控制屏幕尺寸大小

 //控制数据大屏放大与缩小let box = document.querySelector('.box');box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`//计算缩放的比例啦function getScale(w = 1920, h = 1080) {const ww = window.innerWidth / w;const wh = window.innerHeight / h;return ww < wh ? ww : wh;//ww<wh情况: 1920/1920(ww)   1080/1080(wh)//ww>wh情况:1920/1920(ww)   1080/1080(wh)}// 防抖window.onresize = () => {box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`}

注意

同时还可以写防抖和多媒体查询使得屏幕缩放更加自如、

前端大屏自适应缩放

简介前端中大屏往往用于展示各种炫酷的界面和特效，因此特别受用好欢迎。但是在开发过程中，常常也会出现各种问题，与一般的页面相比， 最让人头疼的是大屏的自适应问题。使用CSS中transform属性和js获取缩放比例方法先简单写一下…...

编程日记 2023/8/10 18:19:39

【Express.js】全面鉴权

全面鉴权这一节我们来介绍一下 Passport.js，这是一个强大的 NodeJS 的认证中间件 Passport.js 提供了多种认证方式，账号密码、OpenID、ApiKey、JWT、OAuth、三方登录等等。使用 Passport.js 认证要配置三个部分： 认证策略中间件会话接…...

编程日记 2023/8/10 18:18:38

了解华为（H3C）网络设备和OSI模型基本概念

目录一，认识华为 1.华为发展史 2.华为网络设备介绍 3.VRP概述二，OSI七层模型 1.七层模型详细表格 2.各层的作用 3.数据在各层之间的传递过程 4.OSI四层网络模型一，认识华为官网：https://www.huawei.com/cn/ 1.华为发…...

编程日记 2023/8/10 18:17:36

Web3到底是个啥？

Web3是近两年来科技领域最火热的概念之一，但是目前对于Web3的定义却仍然没有形成标准答案，相当多对于Web3的理解，都是建立在虚拟货币行业（即俗称的“币圈”）的逻辑基础之上的。区块链服务网络（BSN&#x…...

编程日记 2023/8/10 18:16:35

山东高校的专利申请人经常掉进的误区2

02、专利技术交底书只提供简单思路一些高校科研人员在申请专利时，给专利代理人的技术交底书往往只给出了思路，或者技术方案不够详细，或者根本不会有实验验证过程和数据。事实上，专利技术交底书的详尽程度将直接影响代理人对技…...

编程日记 2023/8/10 18:15:34

关于webpack的基本配置

文章目录前言一、webpack基本配置1.配置拆分和merge2. 启动服务3、处理es6，配置babel4、处理样式5、处理图片前言为什么要有webpack构建和打包？ 更好的模块化管理。webpack支持模块化规范：代码分割成独立模块，并管理模块之间…...

编程日记 2023/8/10 18:14:33

SpringBoot WebSocket配合react 使用消息通信

引入websocket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>配置websocket import org.springframework.context.annotation.Bean; import org.spr…...

编程日记 2023/8/10 18:13:31

【积水成渊】uniapp高级玩法分享

大家好，我是csdn的博主：lqj_本人这是我的个人博客主页： lqj_本人_python人工智能视觉（opencv）从入门到实战,前端,微信小程序-CSDN博客最新的uniapp毕业设计专栏也放在下方了： https://blog.csdn.net/lbcy…...

编程日记 2023/8/10 18:12:30

在指定的 DSN 中，驱动程序和应用程序之间的体系结构不匹配

1.Cadence 17.2 配置CIS数据库报：ERROR(ORCIS-6245): Database Operation Failed 安装cadance17.2以上版本时，ERROR(ORCIS-6245): Database Operation Failed_收湾湾的博客-CSDN博客原因是ODBC数据库没有配置，或者没有驱动， 驱…...

编程日记 2023/8/10 18:11:29

API接口 |产品经理一定要懂的技术知识

什么是接口❓ 要理解接口是什么，首先理解一下为什么要用接口？ 两个独立的系统，它们的数据或程序是独立的，这就使得它们无法直接访问对方的数据库或程序（两个独立的数据相当于两个独立的家庭，每个家庭肯定是…...

编程日记 2023/8/10 18:10:28

C++中访问存储在数组中的数据

C中访问存储在数组中的数据要访问数组中的元素，可使用从零开始的索引。这些索引之所以被称为从零开始的，是因为数组中第一个元素的索引为零。因此，存储在数组 myNumbers 中的第一个整数值为 myNumbers[0]，第二个为 myNumbers[1]…...

编程日记 2023/8/10 18:09:27

【创建型设计模式】C#设计模式之原型模式

原型模式是一种创建型设计模式，它通过复制现有对象来创建新对象，而无需通过实例化的方式。它允许我们使用已经存在的对象作为蓝本，从而创建新的对象，这样可以避免重复初始化相似的对象，提高了对象的创建效率。现在给…...

编程日记 2023/8/10 18:08:25

用C语言高效地打印杨辉三角

假设杨辉三角的通项公式为a(n)，则打印形式如下： 然而我们知道，它应该是这样的： 三角形两边的值都为1，且每个元素的值都为该元素正上方和其正上方前面的元素的值之和。为了实现这个代码，我们需要知道每行首…...

编程日记 2023/8/10 18:07:24

TCP/IP四层模型对比OSI七层网络模型的区别是啥？数据传输过程原来是这样的

一、TCP/IP四层模型对比OSI七层模型它们两个定义的一些功能和协议都是差不多的。TCP/IP四层协议模型比我们的七层少了三层，把我们的数据链路层和物理层放在一层里面了，叫做数据链路层（网络接口层），对应网络协议也没有…...

编程日记 2023/8/10 18:06:23

接口测试实战，Jmeter正则提取响应数据-详细整理，一篇打通...

目录：导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜） 前言在测试时&#xf…...

编程日记 2023/8/10 18:04:11

基于自适应变异粒子群优化BP神经网络的风速预测，基于IPSO-BP神经网络里的风速预测

目录摘要 BP神经网络的原理 BP神经网络的定义 BP神经网络的基本结构 BP神经网络的神经元 BP神经网络的激活函数， BP神经网络的传递函数粒子群算法的原理及步骤基于自适应变异粒子群算法改进优化BP神经网络的风速预测完整代码下载：https://download.csdn.net/download/ab…...

编程日记 2023/8/10 18:03:10

MySQL—日志

这里写目录标题 undo logundo log的作用undo log页记录的是什么 Buffer Pool为什么需要Buffer PoolBuffer Pool缓存什么 redo log什么是redo logredo log的作用redo log什么时候刷盘undo和redo的区别 binlogbinlog 作用redo log和binlog区别如果数据数据被删了，能用…...

编程日记 2023/8/10 18:02:07

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次

uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次问题代码官方说明参考资料问题代码直接从官方示例中复制过来改的。为了演示 <template><view><uni-forms ref"form" :modelValue"formData" :rules"rules&qu…...

编程日记 2023/8/10 18:01:05

每日一题8.10 lc39

39. 组合总和给你一个无重复元素的整数数组 candidates 和一个目标整数 target ，找出 candidates 中可以使数字和为目标数 target 的所有不同组合 ，并以列表形式返回。你可以按任意顺序返回这些组合。 candidates 中的同一个数字可以无限制重…...

编程日记 2023/8/10 18:00:05

贝叶斯深度学习的温和介绍

一、说明欢迎来到令人兴奋的概率编程世界！本文是对这个领域的温和介绍，你只需要对深度学习和贝叶斯统计有一个基本的了解。如果像我一样，你听说过贝叶斯深度学习，并且你猜它涉及贝叶斯统计，但你不知道它是如何使用的&…...

编程日记 2023/8/10 17:59:03

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...

编程新知 2026/2/6 19:29:20

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...

编程新知 2026/1/30 4:52:56

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据案例一对于查询类API，查询的是单条数据，比如根据主键ID查询用户信息，sql如下： select id, name, age from user where id #{id}API默认返回的数据格式是多条的，如下： {&qu…...

编程新知 2026/2/2 22:06:13

Python如何给视频添加音频和字幕

在Python中，给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加，包括必要的代码示例和详细解释。环境准备在开始之前，需要安装以下Python库：…...

编程新知 2025/9/3 4:12:17

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

【网络安全】开源系统getshell漏洞挖掘

审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25