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

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()
})
相关推荐
IT_陈寒2 小时前
JavaScript的闭包把我坑惨了,说好的内存会自动回收呢?
前端·人工智能·后端
Jackson__3 小时前
分享一个横向滚动案例,带悬停暂停,通用性很强
前端
MariaH3 小时前
git rebase的使用
前端
_柳青杨3 小时前
深入理解 JavaScript 事件循环
前端·javascript
阡陌Jony3 小时前
关于前端性能优化的一些问题:
前端
用户600071819104 小时前
【翻译】简化 TSRX
前端
IT乐手5 小时前
佛德角逼平西班牙,国足还有啥借口?
前端
JustHappy6 小时前
我汇总了身边朋友的经历才发现,其实第一份实习是最难找的......
前端·后端·面试
星栈6 小时前
Dioxus 的响应式系统:`Signal`、`Memo`、`Effect` 和异步状态到底该怎么分工
前端·前端框架
yingyima6 小时前
Java 正则表达式:比你想象的更强大
前端