前端大屏自适应缩放
简介
前端中大屏往往用于展示各种炫酷的界面和特效，因此特别受用好欢迎。
但是在开发过程中，常常也会出现各种问题，与一般的页面相比，
最让人头疼的是大屏的自适应问题。
使用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 中的 同一个 数字可以 无限制重…...
贝叶斯深度学习的温和介绍
一、说明 欢迎来到令人兴奋的概率编程世界！本文是对这个领域的温和介绍，你只需要对深度学习和贝叶斯统计有一个基本的了解。如果像我一样，你听说过贝叶斯深度学习，并且你猜它涉及贝叶斯统计，但你不知道它是如何使用的&…...
业务系统对接大模型的基础方案：架构设计与关键步骤
业务系统对接大模型：架构设计与关键步骤 在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...
多模态2025：技术路线“神仙打架”，视频生成冲上云霄
文｜魏琳华 编｜王一粟 一场大会，聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...
python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）
更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）
笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型 论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机 传统的知识图谱补全（KGC）模型通过…...
mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
基于Java+VUE+MariaDB实现（Web）仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意：运行前…...