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

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()
})
相关推荐
嘟嘟071710 分钟前
React 受控组件与非受控组件:表单数据到底归谁管?
前端·javascript·react.js
嘟嘟071712 分钟前
React 表单管理进阶:从单字段到带校验的完整登录表单
前端·javascript·react.js
光影少年20 分钟前
react navite原生事件监听、全局事件通知
前端·react native·react.js
lvv21 分钟前
不会被渲染的组件,为什么让我的首屏白屏了?(一次前端问题总结)
前端·webpack·性能优化
码上成长1 小时前
微前端 Invalid hook call?先把「window 注入 + externals」整明白
前端·react.js·前端框架
宿6741 小时前
vue3-DOM树
前端·javascript·vue.js
白狐_7981 小时前
408数据结构:中缀转后缀与操作符栈容量——真题精讲
前端·javascript·数据结构
谷哥的小弟1 小时前
TypeScript在Vue3中的常见写法
前端·javascript·typescript
人间凡尔赛2 小时前
2026 前端全栈新范式:Server Actions + Edge Runtime,告别传统 API 路由
前端·全栈·next.js
码林鼠5 小时前
2026前端面试题(二)
前端