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.mzph.cn/pingmian/750.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 注册自定义指令,对输入框输入内容过滤(区分中英文)

注册vue全局指令 对el-input输入框进行最大长度过滤&#xff08;区分中英文&#xff09; 过滤空格 注册全局指令 main.js /*** 输入框最长输入限制* param {*} e 文本内容* param {number} maxlength 最大字符长度* param {boolean} trim 是否过滤空格* returns {string} 最…

acwing算法提高之图论--有向图的强连通分量

目录 1 介绍2 训练 1 介绍 本博客介绍有向图的强连通分量的题目。 连通分量&#xff1a;是针对有向图的一个概念。对于分量中任意两个结点a、b&#xff0c;必然可以从a走到b&#xff0c;且从b走到a。 强连通分量&#xff1a;是针对有向图的一个概念。极大强连通分量&#xff…

【数据结构】单链表的头节点与尾节点

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;数据结构 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

玄子Share-计算机网络参考模型

玄子Share-计算机网络参考模型 分层思想 利用七层参考模型&#xff0c;便于在网络通信过程中&#xff0c;快速的分析问题&#xff0c;定位问题并解决问题 将复杂的流程分解为几个功能相对单一的子过程 整个流程更加清晰&#xff0c;复杂问题简单化 更容易发现问题并针对性的…

【Java开发指南 | 第十七篇】Java 方法

读者可订阅专栏&#xff1a;Java开发指南 |【CSDN秋说】 文章目录 简介语法实例构造方法 简介 Java中的方法是用来执行特定任务的一组语句&#xff0c;可以重复使用。它们包含在类或对象中&#xff0c;并通过调用来执行。 举个例子&#xff0c;println() 是一个方法&#xff…

动态内存管理 柔性数组

文章目录 动态内存函数 malloc freecallocrealloc 重新开辟空间realloc 也可以第一个参数为NULL&#xff0c;则是直接开辟内存&#xff0c;类似于malloc用法 常见的动态内存错误对空指针进行解引用操作对开辟的内存越界访问对非动态开辟的内存使用free释放使用free释放动态开辟…

vue2 在循环里,给字体加上随机颜色并加上随机图标且少重复

在循环里&#xff0c;给字体加上随机颜色并加上随机图标且少重复 <template><div class"pbfb5"><el-row :gutter"32"><el-col :xs"6" :sm"6" :lg"6" style"margin-bottom:32px;" v-for&quo…

(四)相关性分析 学习简要笔记 #统计学 #CDA学习打卡

目录 一. 相关性分析简介 二. 相关性分析方法 1&#xff09;连续型变量vs连续型变量&#xff1a;Pearson/Spearman &#xff08;a&#xff09;Pearson &#xff08;b&#xff09;Spearman等级相关系数 2&#xff09;二分类变量&#xff08;自然&#xff09;vs连续型变量&…

macos知名的清理软件 cleanmymac和腾讯柠檬哪个好 cleanmymacx有必要买吗

MacOS是一款优秀的操作系统&#xff0c;但是随着使用时间的增加&#xff0c;它也会产生一些不必要的垃圾文件&#xff0c;占用磁盘空间和内存资源&#xff0c;影响系统的性能和稳定性。为了保持MacOS的清洁和高效&#xff0c;我们需要使用一些专业的清理软件来定期扫描和清除这…

CentOS服务器安装宝塔(图文详解)

宝塔的操作其实就是类似于把linux的指令使用方式&#xff0c;通过宝塔这个第三方工具进行可视化展示&#xff0c;但其实&#xff0c;他还是在操作linux&#xff0c;只是不需要你去记那么多的指令&#xff0c;宝塔把大多数的工具都集成到自己里面&#xff0c;这样你就可以在宝塔…

信号量Semaphore

什么是信号量&#xff1f; C中的信号量&#xff08;Semaphore&#xff09;是一种同步对象&#xff0c;用于控制对共享资源的访问&#xff0c;以防止多个线程或进程同时访问同一资源&#xff0c;从而避免数据不一致的问题。信号量通过维护一个计数值来实现这一功能&#xff0c;…

【Golang】Gin教学-获取请求信息并返回

安装Gin初始化Gin处理所有HTTP请求获取请求的URL和Method获取请求参数根据Content-Type判断请求数据类型处理JSON数据处理表单数据处理文件返回JSON响应启动服务完整代码测试 Gin是一个用Go&#xff08;又称Golang&#xff09;编写的HTTP Web框架&#xff0c;它具有高性能和简洁…

Event loop(Message loop)

事件循环&#xff08;消息循环&#xff09; 浏览器的进程模型 进程 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 线程 …

Java并发体系--atomic--字段类

atomic--字段类 Atomic字段类是一种原子操作类&#xff0c;用于实现多线程环境下对共享变量的原子操作。它可以确保在并发情况下&#xff0c;对共享变量的操作是原子性的&#xff0c;不会出现线程安全问题。 Atomic字段类提供了一些方法&#xff0c;比如get()和set()方法用…

【Linux学习】Linux权限(二)

文章目录 &#x1f680;Linux权限管理&#x1f680;修改文件的所有者&#x1f680;修改文件或目录的所属组&#x1f680;同时修改为念的拥有者与所属组&#x1f680;文件类型&#x1f680;file指令&#x1f680;目录权限&#x1f680;umask指令&#x1f680;粘滞位 &#x1f68…

Ubuntu22.04.4 - Redis - 笔记

一、安装 sudo apt update sudo apt install redis-serverrootzheng:/etc# redis-cli --version redis-cli 6.0.16二、配置文件修改 配置文件地址 /etc/redis/redis.conf 1、开启远程访问 # 注释掉绑定地址#bind 127.0.0.1&#xff0c;让Redis可远程访问 # bind 127.0.0.1 …

论系统的安全架构的三个论点写一篇论文

撰写一篇围绕系统的安全架构三个论点的论文能够提供深刻的见解关于如何构建一个既安全又可靠的系统。接下来&#xff0c;我们将详细探讨这三个论点&#xff0c;并提供一个论文大纲来指导你如何组织和展开你的论述。 论文大纲 1. 引言 简要介绍系统安全架构的重要性&#xff…

Linux 内核的汇编级别的系统调用

2024年4月19日&#xff0c;周五下午 Linux 内核支持多种汇编级别的系统调用&#xff0c;这些系统调用通常以软中断&#xff08;soft interrupt&#xff09;的方式实现。 这里列举了一些常见的汇编级别的系统调用&#xff1a; x86 架构下的 int 0x80 调用&#xff1a;在 x86 架…

网盘——私聊

在私聊这个功能实现中&#xff0c;具体步骤如下&#xff1a; 1、实现步骤&#xff1a; A、客户端A发送私聊信息请求&#xff08;发送的信息包括双方的用户名&#xff0c;聊天信息&#xff09; B、如果双方在线则直接转发给B&#xff0c;不在线则回复私聊失败&#xff0c;对方…

TLV262x系列单电源运算放大器

这份文件是德州仪器&#xff08;Texas Instruments&#xff09;关于TLV262x系列单电源运算放大器的数据手册。以下是该文件的核心内容概要&#xff1a; 产品系列描述&#xff1a; TLV262x系列是德州仪器&#xff08;Texas Instruments&#xff09;推出的一系列低功耗、宽带宽的…