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

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()
})
相关推荐
hoLzwEge2 分钟前
团队协作的隐藏利器:.vscode 完全指南
前端·前端框架
labixiong4 分钟前
TypeScript 7.0 编译器用 Go 重写,速度暴增10倍——背后到底做了什么?
前端·javascript·go
WaywardOne6 分钟前
Flutter组件化方案(AI总结)
前端·flutter·ai编程
玉宇夕落6 分钟前
原子化编程”:Tailwind CSS 核心原理
前端
是小李呀11 分钟前
解决“Error: The project seems to require yarn but it‘s not installed”报错
前端
weedsfly13 分钟前
一个电商价格计算案例,带你学会前端开发中的责任链模式
前端·javascript·面试
__sjfzllv___13 分钟前
在职前端Leader学习/转行 AI Agent -DAY10
前端
沉迷学习日益消瘦17 分钟前
8 UI 组件库与设计系统:Token 驱动 + 暗色模式 + 4 种主题色
前端
CodeSheep32 分钟前
有这4个迹象,你就该离职了!
前端·后端·程序员
用户0595401744633 分钟前
把大模型记忆回归测试从手工检查换成 Playwright+VCR,误判率从 40% 降到 0
前端·css