技术栈

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

锋行天下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,仿函数的讲解)
相关推荐
是烟花哈
2 小时前
【前端】React框架学习
前端·学习·react.js
qq435694701
3 小时前
JavaWeb08
前端
2401_87845453
4 小时前
html和css的复习(1)
前端·css·html
@PHARAOH
4 小时前
WHAT - git worktree 概念
前端·git
IT_陈寒
5 小时前
我竟然被JavaScript的隐式类型转换坑了三天!
前端·人工智能·后端
我亚索贼六丶
5 小时前
二十六. AI基础概念之如何更好的使用AI
前端
小码哥_常
5 小时前
安卓启动页Logo适配秘籍:告别“奇形怪状”的展示
前端
我亚索贼六丶
5 小时前
二十五.Electron 初体验与进阶
前端
当时只道寻常
5 小时前
像使用 Redis 一样操作 LocalStorage
前端·前端工程化
RONIN
5 小时前
UI组件库elementplus
前端
热门推荐
01GitHub 镜像站点02近期有什么ai的新消息,新动态? 2026.4月032026年4月AI大事件深度解读:大模型竞争进入“深水区“042026年AI前瞻:量子AI、具身智能与科学发现的新纪元05在Windows 11上安装Docker的踩坑记录06codex app每次打开重连5次Reconnecting问题解决07Codex 接入 DeepSeek API 完整配置文档082026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元092026年AI编程工具终极横评:Cursor vs Claude Code vs Copilot10DeepSeek V4 全面解析:测评、对比、案例及实操指南