前端大屏自适应缩放
简介
前端中大屏往往用于展示各种炫酷的界面和特效，因此特别受用好欢迎。
但是在开发过程中，常常也会出现各种问题，与一般的页面相比，
最让人头疼的是大屏的自适应问题。
使用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获取缩放比例方法 先简单写一下…...
【Express.js】全面鉴权
全面鉴权 这一节我们来介绍一下 Passport.js，这是一个强大的 NodeJS 的认证中间件 Passport.js 提供了多种认证方式，账号密码、OpenID、ApiKey、JWT、OAuth、三方登录等等。 使用 Passport.js 认证要配置三个部分： 认证策略中间件会话 接…...
了解华为（H3C）网络设备和OSI模型基本概念
目录 一，认识华为 1.华为发展史 2.华为网络设备介绍 3.VRP概述 二，OSI七层模型 1.七层模型详细表格 2.各层的作用 3.数据在各层之间的传递过程 4.OSI四层网络模型 一，认识华为 官网：https://www.huawei.com/cn/ 1.华为发…...
Web3到底是个啥？
Web3是近两年来科技领域最火热的概念之一，但是目前对于Web3的定义却仍然没有形成标准答案，相当多对于Web3的理解，都是建立在虚拟货币行业（即俗称的“币圈”）的逻辑基础之上的。 区块链服务网络（BSN&#x…...
山东高校的专利申请人经常掉进的误区2
02、专利技术交底书只提供简单思路 一些高校科研人员在申请专利时，给专利代理人的技术交底书往往只给出了思路，或者技术方案不够详细，或者根本不会有实验验证过程和数据。 事实上，专利技术交底书的详尽程度将直接影响代理人对技…...
关于webpack的基本配置
文章目录 前言一、webpack基本配置1.配置拆分和merge2. 启动服务3、处理es6，配置babel4、处理样式5、处理图片 前言 为什么要有webpack构建和打包？ 更好的模块化管理。webpack支持模块化规范：代码分割成独立模块，并管理模块之间…...
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…...
【积水成渊】uniapp高级玩法分享
大家好，我是csdn的博主：lqj_本人 这是我的个人博客主页： lqj_本人_python人工智能视觉（opencv）从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了： https://blog.csdn.net/lbcy…...
在指定的 DSN 中，驱动程序和应用程序之间的体系结构不匹配
1.Cadence 17.2 配置CIS数据库报：ERROR(ORCIS-6245): Database Operation Failed 安装cadance17.2以上版本时，ERROR(ORCIS-6245): Database Operation Failed_收湾湾的博客-CSDN博客 原因是ODBC数据库没有配置，或者没有驱动， 驱…...
API接口 |产品经理一定要懂的技术知识
什么是接口❓ 要理解接口是什么，首先理解一下为什么要用接口？ 两个独立的系统，它们的数据或程序是独立的，这就使得它们无法直接访问对方的数据库或程序（两个独立的数据相当于两个独立的家庭，每个家庭肯定是…...
C++中访问存储在数组中的数据
C中访问存储在数组中的数据 要访问数组中的元素，可使用从零开始的索引。这些索引之所以被称为从零开始的，是因为数组中第一个元素的索引为零。因此，存储在数组 myNumbers 中的第一个整数值为 myNumbers[0]，第二个为 myNumbers[1]…...
【创建型设计模式】C#设计模式之原型模式
原型模式是一种创建型设计模式，它通过复制现有对象来创建新对象，而无需通过实例化的方式。它允许我们使用已经存在的对象作为蓝本，从而创建新的对象，这样可以避免重复初始化相似的对象，提高了对象的创建效率。 现在给…...
用C语言高效地打印杨辉三角
假设杨辉三角的通项公式为a(n)，则打印形式如下： 然而我们知道，它应该是这样的： 三角形两边的值都为1，且每个元素的值都为该元素正上方和其正上方前面的元素的值之和。 为了实现这个代码，我们需要知道每行首…...
TCP/IP四层模型对比OSI七层网络模型的区别是啥？数据传输过程原来是这样的
一、TCP/IP四层模型对比OSI七层模型 它们两个定义的一些功能和协议都是差不多的。TCP/IP四层协议模型比我们的七层少了三层，把我们的数据链路层和物理层放在一层里面了，叫做数据链路层（网络接口层），对应网络协议也没有…...
接口测试实战，Jmeter正则提取响应数据-详细整理，一篇打通...
目录：导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜） 前言 在测试时…...
基于自适应变异粒子群优化BP神经网络 的风速预测，基于IPSO-BP神经网络里的风速预测
目录 摘要 BP神经网络的原理 BP神经网络的定义 BP神经网络的基本结构 BP神经网络的神经元 BP神经网络的激活函数， BP神经网络的传递函数 粒子群算法的原理及步骤 基于自适应变异粒子群算法改进优化BP神经网络的风速预测 完整代码下载：https://download.csdn.net/download/ab…...
MySQL—日志
这里写目录标题 undo logundo log的作用undo log页记录的是什么 Buffer Pool为什么需要Buffer PoolBuffer Pool缓存什么 redo log什么是redo logredo log的作用redo log什么时候刷盘undo和redo的区别 binlogbinlog 作用redo log和binlog区别如果数据数据被删了，能用…...
uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次
uniapp 扩展组件 uni-forms 的表单验证之 validateFunction 只响应一次 问题代码官方说明参考资料 问题代码 直接从官方示例中复制过来改的。为了演示 <template><view><uni-forms ref"form" :modelValue"formData" :rules"rules&qu…...
每日一题8.10 lc39
39. 组合总和 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ，找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ，并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重…...
贝叶斯深度学习的温和介绍
一、说明 欢迎来到令人兴奋的概率编程世界！本文是对这个领域的温和介绍，你只需要对深度学习和贝叶斯统计有一个基本的了解。如果像我一样，你听说过贝叶斯深度学习，并且你猜它涉及贝叶斯统计，但你不知道它是如何使用的&…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
Android15默认授权浮窗权限
我们经常有那种需求，客户需要定制的apk集成在ROM中，并且默认授予其【显示在其他应用的上层】权限，也就是我们常说的浮窗权限，那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
适应性Java用于现代 API：REST、GraphQL 和事件驱动
在快速发展的软件开发领域，REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名，不断适应这些现代范式的需求。随着不断发展的生态系统，Java 在现代 API 方…...
WPF八大法则：告别模态窗口卡顿
⚙️ 核心问题：阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程，导致后续逻辑无法执行： var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题：…...
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10+pip3.10）
第一篇：Liunx环境下搭建PaddlePaddle 3.0基础环境（Liunx Centos8.5安装Python3.10pip3.10） 一：前言二：安装编译依赖二：安装Python3.10三：安装PIP3.10四：安装Paddlepaddle基础框架4.1…...
自然语言处理——文本分类
文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益（IG） 分类器设计贝叶斯理论：线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别， 有单标签多类别文本分类和多…...