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

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()
})
相关推荐
曹牧7 小时前
Spring MVC : Controller 层URL划分
java·运维·服务器·前端
njsgcs7 小时前
safari局域网读电脑地址,第一次读的到,重载之后就不行,得重启。.local解决办法
前端·电脑·safari
Lank_M7 小时前
超分分块为什么按后端分:160与96的取舍
前端
流星。。方7 小时前
企业官网前端组件怎么拆?从落地页到内容页的分层思路
前端
deli0077 小时前
豹纹和斑马纹是怎么长出来的:调两个参数,花纹自己浮现
前端
进击的明明7 小时前
TypeScript速通笔记(上)
前端·面试·typescript
deli0077 小时前
萤火虫为什么会一起闪:调一个耦合系数,整片林子自己同步
前端
计算机魔术师7 小时前
英伟达联合超100家伙伴推出开放代理安全平台
前端
看谷秀7 小时前
arkts-12 鸿蒙生态/卡片
前端·arkts
朱 欢 庆7 小时前
el-table-v2 虚拟表格组件
前端·javascript·vue.js