技术栈

大屏可视化适配不同宽高比屏幕,保持网页宽高比不变的代码

锋行天下2025-04-24 14:49
ini 复制代码
const el=document.getElementById('app')
let width=1920
let height=1080
el.style.transformOrigin="top left"
function init(){
    const scaleX=innerWidth/width
    const scaleY=innerHeight/height
    const scale=Math.min(scaleX,scaleY)
    const left=(innerWidth-width*scale)/2
    const top=(innerHeight-height*scale) /2

    el.style.transform=`translate(${left}px,${top}px) scale(${scale})`
}
init()
addEventListener('resize',()=>{
    init()
})
上一篇:服务器操作系统时间同步失败的原因及修复
下一篇:C++笔记-stack_queue(含deque,priority_queue,仿函数的讲解)
相关推荐
^草莓牛乳茶^
4 分钟前
【Css】css修改滚动条的样式
前端·css3
Raink老师
10 分钟前
6. TypeScript 函数
前端·javascript·typescript
云层上的光
33 分钟前
React menu 菜单栏
前端·react.js
天天码行空
38 分钟前
PurgeCSS:CSS瘦身优化性能终极解决方案
前端
哀木
38 分钟前
React 搭建组件库之 dumi 踩坑之旅
前端
前端小巷子
38 分钟前
浏览器的组成部分与工作原理
前端·javascript·面试
Dream耀
39 分钟前
解密JavaScript的this绑定规则
前端·javascript·架构
10年前端老司机
40 分钟前
scss精华总结
前端·css
快起来别睡了
43 分钟前
HTML5 代码敲击乐:前端开发的结构与韵律
前端·css·html
Kevin不想说话92619
44 分钟前
Node.js开发环境完整部署指南
前端
热门推荐
01Coze扣子平台完整体验和实践(附国内和国际版对比)02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04海康Visionmaster-常见问题排查方法-启动阶段05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07DeepSeek各版本说明与优缺点分析08R-tree详解09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高,一键全文降!文件格式不变,公式都保留的!10零代码入门 | Coze——让大模型接入自己的数据库