js自动缩放页面,html自动缩放页面,大屏自动缩放页面,数字看板自动缩放页面,大数据看板自动缩放页面

js自动缩放页面html自动缩放页面大屏自动缩放页面,数字看板自动缩放页面,大数据看板自动缩放页面

由纯JS实现

 

html代码

<!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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><title>缩放</title><style>* {margin: 0;padding: 0;}body {overflow: hidden;color: rgb(0, 0, 0);background-color: #1d2553;}.main {width: 1920px;height: 1080px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transform-origin: left top;background-color: beige;} .main img{width: 600px;height: auto;max-width: 100%;max-height: 100%;}</style>
</head><body> <div class="main" id="main"><h1>缩放</h1><img src="./img/Mercedes_Logo_19.jpg" alt=""></div> <script type="module">import useDraw from '../js/useDraw.js';console.log(useDraw);useDraw(document.getElementById('main'));</script>
</body></html>

js代码

useDraw.js

const useDraw = (appRef) => {// * 指向最外层容器// let appRef;// * 定时函数let timer;// * 默认缩放值const scale = {width: '1',height: '1',}// * 设计稿尺寸(px)const baseWidth = 1920const baseHeight = 1080// * 需保持的比例(默认1.77778)const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))const calcRate = () => {// 当前宽高比const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))if (appRef) {if (currentRate > baseProportion) {// 表示更宽scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)scale.height = (window.innerHeight / baseHeight).toFixed(5)appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`} else {// 表示更高scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)scale.width = (window.innerWidth / baseWidth).toFixed(5)appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`}}}calcRate()const resize = () => {clearTimeout(timer)timer = setTimeout(() => {calcRate()}, 200)}window.addEventListener('resize', resize)// 改变窗口大小重新绘制const unWindowDraw = () => {window.removeEventListener('resize', resize)}
}
export default useDraw;


http://www.ppmy.cn/devtools/3787.html

相关文章

本地主机搭建服务器后如何让外网访问?快解析内网端口映射

本地主机搭建应用、部署服务器后&#xff0c;在局域网内是可以直接通过计算机内网IP网络地址进行连接访问的&#xff0c;但在外网电脑和设备如何访问呢&#xff1f;由于内网环境下&#xff0c;无法提供公网IP使用&#xff0c;外网访问内网就需要一个内外网转换的介质。这里介绍…

Linux 快问快答

如果对于找 Java 后端开发的话&#xff0c;我感觉会这几个差不多了&#xff0c;面试官应该不会问的这么详细吧。一般就问问 Linux 的几个常用的命令&#xff0c;然后做一些简单的性能排查就好了。如果面试被问到另外的问题&#xff0c;那我再补充进来&#xff0c;现在先掌握这么…

python爬虫-----深入了解 requests 库(第二十五天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

计算机网络常问面试题

一.HTTPS是如何保证安全传输的 https通过使⽤对称加密、⾮对称加密、数字证书等⽅式来保证数据的安全传输。 客户端向服务端发送数据之前&#xff0c;需要先建⽴TCP连接&#xff0c;所以需要先建⽴TCP连接&#xff0c;建⽴完TCP连接后&#xff0c;服务端会先给客户端发送公钥…

c++初阶——类和对象(上)

大家好我是小锋今天我们来学习类和对象 面向过程和面向对象初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对…

ChatGPT在线网页版

ChatGPT镜像 今天在知乎看到一个问题&#xff1a;“平民不参与内测的话没有账号还有机会使用ChatGPT吗&#xff1f;” 从去年GPT大火到现在&#xff0c;关于GPT的消息铺天盖地&#xff0c;真要有心想要去用&#xff0c;途径很多&#xff0c;别的不说&#xff0c;国内GPT的镜像…

【Jupyter notebook】安装-换源-报错问题收集及实测解决法

Jupyter 在一个名为 kernel 的单独进程中运行用户的代码。kernel 可以是不同的 Python 安装在不同的 conda 环境或虚拟环境,甚至可以是不同语言(例如 Julia 或 R)的解释器。 1, 如何查询当前环境下的python 版本 运行 import sys print(sys.executable) %pwd import sy…

代码学习记录48---单调栈

随想录日记part48 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.04.19 主要内容&#xff1a;今天开始要学习单调栈的相关知识了&#xff0c;今天的内容主要涉及&#xff1a;503.下一个更大元素II ;42. 接雨水 503.下一个更大元素II 42. 接雨水 Topic1下一个更…

【云计算】混合云分类

《混合云》系列&#xff0c;共包含以下 3 篇文章&#xff1a; 【云计算】混合云概述【云计算】混合云分类【云计算】混合云组成、应用场景、风险挑战 &#x1f60a; 如果您觉得这篇文章有用 ✔️ 的话&#xff0c;请给博主一个一键三连 &#x1f680;&#x1f680;&#x1f68…

C#探索之路基础夯实篇(5):语法糖概念解析

C#探索之路基础夯实篇(5)&#xff1a;语法糖概念解析 文章目录 C#探索之路基础夯实篇(5)&#xff1a;语法糖概念解析1、概念定义2、Lua中的语法糖3、C#中的语法糖4、C中的语法糖5、优缺点辨析6、适用范围7、总结 从之前一开始接触lua的时候开始&#xff0c;开始第一次接触到语法…

19-20 - 数组类的创建

---- 整理自狄泰软件唐佐林老师课程 1. 问题 基于顺序存储结构的线性表可能被当成数组误用&#xff0c;这一节设计数组类来替代原生数组。 2. 课程目标 完成 Array 类的具体实现完成 StaticArray 类的具体实现完成 DynamicArray 类的具体实现 3. 设计要点 Array 是一个抽象…

Spire.PDF for .NET【文档操作】演示:动态创建 PDF 并将其发送到客户端浏览器

可移植文档格式 (PDF) 是 Adobe 制定的独立规范的固定版式文档。它封装了完整的描述&#xff0c;包括文本字体、图形和显示它所需的其他信息。 Spire.PDF for .NET 是一款独立 PDF 控件&#xff0c;用于 .NET 程序中创建、编辑和操作 PDF 文档。使用 Spire.PDF 类库&#xff0…

stm32实现hid鼠标

启动CubelMX 选择芯片&#xff08;直接输入stm32f103zet6) 设置时钟 如下图 usb设置 配置usb设备 调试端口设置 配置时钟 项目输出设置 打开工程&#xff08;后记&#xff1a;此工程含有中文不能编译通过) 配置项目 配置调试器 编译无法通过 删除路径中的中文&#xff0c;以及…

数据结构:哈密顿回路基础

什么是哈密顿回路&#xff1f; 哈密顿回路&#xff08;Hamiltonian Cycle&#xff09;是图论中的一个概念&#xff0c;指的是在一个图中通过图的每个顶点恰好一次且仅一次&#xff0c;并最终回到起始顶点的闭合回路。在一个哈密顿回路中&#xff0c;除了起始和结束的顶点必须是…

VUE项目使用.env配置多种环境以及如何加载环境

第一步&#xff0c;创建多个环境配置文件 Vue CLI 项目默认使用 .env 文件来定义环境变量。你可以通过创建不同的 .env 文件来为不同环境设置不同的环境变量&#xff0c;例如&#xff1a; .env —— 所有模式共用.env.local —— 所有模式共用&#xff0c;但不会被 git 提交&…

用Python在PDF文档中插入单图像水印和平铺图像水印

PDF文档因其跨平台兼容性和内容保真度成为信息交换的标准载体&#xff0c;为应对版权侵犯、内容篡改以及未经授权的传播等风险&#xff0c;向PDF中插入图片水印成为一种强化文档安全性、彰显所有权及实施访问控制的有效手段。图片水印不仅能以直观的方式标示文档来源、强化版权…

OpenHarmony开发案例:【分布式遥控器】

1.概述 目前家庭电视机主要通过其自带的遥控器进行操控&#xff0c;实现的功能较为单一。例如&#xff0c;当我们要在TV端搜索节目时&#xff0c;电视机在遥控器的操控下往往只能完成一些字母或数字的输入&#xff0c;而无法输入其他复杂的内容。分布式遥控器将手机的输入能力…

2024五一杯数学建模A题B题C题思路汇总分析

文章目录 1 赛题思路2 比赛日期和时间3 组织机构4 建模常见问题类型4.1 分类问题4.2 优化问题4.3 预测问题4.4 评价问题 5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 比赛日期和时间 报名截止时间&#xff1a;2024…

npm install CERT_HAS_EXPIRED解决方法

目录 一、问题描述二、问题原因三、解决方法 一、问题描述 执行命令 npm install 报错&#xff1a; npm WARN registry Unexpected warning for https://registry.npm.taobao.org/: Miscellaneous Warning CERT_HAS_EXPIRED: request to https://registry.npm.taobao.org/js-…

艾体宝方案 | ITT-Profitap IOTA——铁路运输的远程网络捕获和故障排除方案

在移动互联时代&#xff0c;铁路运输的数字化转型已成不可逆转的趋势。然而&#xff0c;随之而来的是对网络连接质量和故障排查的更高要求。本文将探讨如何利用艾体宝Profitap IOTA技术&#xff0c;在火车上实现远程网络捕获和故障排查&#xff0c;助力铁路运输行业迈向智能化未…