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

前端大屏自适应缩放

news 2026/4/13 2:37:21

简介

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

使用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

记录复现多模态大模型论文OPERA的一周工作泄

一、简化查询 1. 先看一下查询的例子 /// /// 账户获取服务 /// /// /// public class AccountGetService(AccountTable table, IShadowBuilder builder) {private readonly SqlSource _source new(builder.DataSource);private readonly IParamQuery _accountQuery build…...

编程新知 2026/4/13 1:31:11

别再把“AI 记忆”理解成向量库了MemPalace 源码级架构深拆

引言很多人一提到“AI 记忆系统”，第一反应就是：把历史对话存进向量库，等需要的时候再检索出来。这个思路当然没错，但它只碰到了问题表面。当我真正把 MemPalace 的核心源码一路读下来之后，我越来越强烈地意识到&am…...

编程新知 2026/4/12 23:41:20

记一次综合型流量分析 | 添柴不加火聪

核心摘要：这篇文章能帮你 ?? 1. 彻底搞懂条件分支与循环的适用场景，告别选择困难。 ?? 2. 掌握遍历DOM集合修改属性的标准姿势与性能窍门。 ?? 3. 识别流程控制中的常见“坑”，并学会如何优雅地绕过去。 ?? 主要内容脉络 ?? 一、痛…...

编程新知 2026/4/12 23:31:14

BOTW-Save-Editor-GUI：让《塞尔达传说：旷野之息》存档编辑变得简单直观

BOTW-Save-Editor-GUI：让《塞尔达传说：旷野之息》存档编辑变得简单直观【免费下载链接】BOTW-Save-Editor-GUI A Work in Progress Save Editor for BOTW 项目地址: https://gitcode.com/gh_mirrors/bo/BOTW-Save-Editor-GUI 对于《塞尔达传说&a…...

编程新知 2026/4/12 22:19:03

别等2026年Q3！奇点大会预警：文本生成合规红线将在6个月内强制接入国家AIGC监管沙箱

第一章：2026奇点智能技术大会：大模型文本生成 2026奇点智能技术大会(https://ml-summit.org) 核心突破：上下文感知的动态长度建模本届大会首次公开演示了支持 256K tokens 动态窗口滑动的文本生成架构，其关键创新在于将传统固定…...

编程新知 2026/4/12 20:12:31

【独家授权发布】：SITS2026未公开数据——中、阿、印地、斯瓦希里语微调成本对比表（附可复用Prompt模板）

第一章：SITS2026演讲：大模型多语言支持 2026奇点智能技术大会(https://ml-summit.org) 在SITS2026主会场的Keynote环节，来自OpenLingua Foundation的研究团队展示了全新开源大模型LinguaNova-7B的多语言能力演进路径。该模型覆盖128种语言&…...

编程新知 2026/4/12 19:29:46

2026 最新自媒体 AI 写文 + 发布工具｜全面测评，新手必看

别再手敲键盘了，AI写文已成新常态我刚入行做自媒体那会儿，一篇千字文能磨到凌晨三点，选题、查资料、排版、配图、发平台……流程繁琐得像在跑马拉松。如今回头看，简直不敢相信自己居然靠“硬肝”撑了那么久。2026年，AI…...

编程新知 2026/4/12 19:05:20

从零到一：手把手教你构建专属Pikachu漏洞演练场

1. 为什么需要搭建Pikachu漏洞演练场刚开始学习网络安全时，很多人都会遇到一个尴尬的问题：学了很多理论，但找不到合适的实战环境。直接拿真实网站练手既不道德也不合法，这时候就需要一个安全、可控的漏洞演练平台。Pikachu就是这…...

编程新知 2026/4/12 18:08:29

从零构建AI辅助逆向分析环境：JADX-MCP与LLM的实战集成指南

1. 为什么需要AI辅助逆向分析？ 逆向工程一直是安全研究员和开发者的重要技能，但面对日益复杂的Android应用，传统的手工分析方式效率低下。一个中等规模的APK反编译后可能产生数万行代码，人工阅读这些代码就像大海捞针。我曾经分析…...

编程新知 2026/4/12 17:45:51

ResMLP、gMLP怎么选？深入对比三大纯MLP视觉模型的优缺点与落地场景

ResMLP、gMLP与MLP-Mixer技术选型指南：三大纯MLP视觉模型实战对比当计算机视觉领域还在为Transformer和CNN争论不休时，一匹黑马正悄然改变游戏规则——纯MLP架构。不同于传统认知，MLP-Mixer、ResMLP和gMLP这些仅由多层感知机构建的模型&…...

编程新知 2026/4/12 16:28:16

简介

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

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

注意

相关文章：