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

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()
})
相关推荐
前端炒粉12 小时前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
花归去13 小时前
ant的a-table更改表格的高度
前端·javascript·html
sibylyue13 小时前
基于 Vben Admin 框架的 Vue 3 前端项目配置文件及常用命令
前端·javascript·vue.js
知几蜗牛13 小时前
0 后端 · 0 数据库 · 0 备案:用 AI 两天搓出的股票管理系统,开源了
前端·后端·llm
雪芽蓝域zzs14 小时前
Element‑Plus icon 图标名称查询 & 和菜单 meta.icon 字段映射
前端
01_ice14 小时前
前端学习css
前端·css·学习
愚公搬代码15 小时前
【愚公系列】《Web应用安全》010-Repeater模块的使用
前端·安全
Cache技术分享15 小时前
503. Java 反射 - 编写 ServiceFactory 类
前端·后端
赵大仁15 小时前
AI 限流 UX 设计:排队、降级、告知与用户预期管理
前端·ai·限流·用户体验·产品设计
__sjfzllv___15 小时前
在职前端Leader学习/转行 AI Agent -DAY37
前端