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

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()
})
相关推荐
龙在天几秒前
vue 请求接口快慢 覆盖 解决方案
前端
跟橙姐学代码17 分钟前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_17 分钟前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou13721 分钟前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌21 分钟前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_23 分钟前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
云枫晖31 分钟前
JS核心知识-数据转换
前端·javascript
xuyanzhuqing31 分钟前
代码共享方案-多仓库合并单仓库
前端
RaidenLiu33 分钟前
Riverpod 3:重建控制的实践与性能优化指南
前端·flutter
学习中的小胖子33 分钟前
React的闭包陷阱
前端