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

前端大屏自适应缩放

简介

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

使用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%)`}

注意

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

相关文章:

前端大屏自适应缩放

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

【Express.js】全面鉴权

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

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

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

Web3到底是个啥?

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

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

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

关于webpack的基本配置

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

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高级玩法分享

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

基于自适应变异粒子群优化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区别如果数据数据被删了&#xff0c;能用…...

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 &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限制重…...

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

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

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...