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

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()
})
相关推荐
SuperEugene20 分钟前
Vue3 配置驱动弹窗:JSON配置弹窗内容/按钮,避免重复开发弹窗|配置驱动开发实战篇
前端·javascript·vue.js·前端框架·json
WayneYang21 分钟前
前端 JavaScript 核心知识点 + 高频踩坑 + 大厂面试题全汇总(开发 / 面试必备)
前端·javascript
小贵子的博客24 分钟前
基于Vue3 和 Ant Design Vue实现Modal弹窗拖拽组件
前端·javascript·vue.js
小李子呢021127 分钟前
前端八股CSS---CSS选择器和优先级
前端·css
阿凤2130 分钟前
uniapp如何修改下载文件位置
开发语言·前端·javascript
小李子呢021132 分钟前
前端八股---MVVM
前端·javascript·vue.js
神毓逍遥kang35 分钟前
在nest.js中我想把Java的Sa-Token搬来
前端·后端
Sheldon一蓑烟雨任平生36 分钟前
grid(一文读懂 css 网格布局)
前端·css·grid·grid-template·现代css·css 网格布局
砍材农夫42 分钟前
Hermes 搭建可视化web-dashboard界面
前端·人工智能
Z_Wonderful1 小时前
Qiankun 子应用数据互通 + 资源共享 完整方案(React+Vue)
前端·vue.js·react.js