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

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()
})
相关推荐
Henry2you4 分钟前
新手引导-纯js手搓
前端
小桥风满袖4 分钟前
Three.js-硬要自学系列13 (加载gltf外部模型、加载大模型)
前端·css·three.js
前端涂涂5 分钟前
express-generratior工具用法
前端·后端
正在努力的前端小白5 分钟前
Vue3可编辑字段组件的演进之路:从繁琐到优雅
前端·javascript·vue.js
极客小俊44 分钟前
粘性定位Position:sticky属性是不是真的没用?
前端
云端看世界1 小时前
ECMAScript 类型转换 下
前端·javascript
云端看世界1 小时前
ECMAScript 运算符怪谈 下
前端·javascript
云端看世界1 小时前
ECMAScript 函数对象实例化
前端·javascript
前端爆冲1 小时前
基于vue和flex实现页面可配置组件顺序
前端·javascript·vue.js
云端看世界1 小时前
ECMAScript 中的特异对象
前端·javascript