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

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()
})
相关推荐
踩着两条虫1 分钟前
VTJ 平台六大设计模式落地实战指南
开发语言·前端·人工智能·低代码·设计模式·重构·架构
Yeats_Liao2 分钟前
后台 Sidebar 伸缩交互(PC + 移动端)实现
前端·javascript·css·html5
MXN_小南学前端7 分钟前
computed 计算属性详解:触发时机、实战场景、Vue2 与 Vue3 对比
前端·javascript·vue.js
isNotNullX15 分钟前
数据大屏怎么做?数据大屏有哪四个核心环节
开发语言·前端·javascript
漫游的渔夫31 分钟前
RAG 落地 3 个月,我才发现排序(Rerank)比检索更重要
前端·人工智能
衣乌安、37 分钟前
Agent之ReAct
前端·ai
CodeAI40 分钟前
不会 Next.js 你好意思说自己是 React 开发者?从零到上线一条龙
前端
霁月的小屋1 小时前
不只是压缩:当模型蒸馏开始复制人格
前端·ai
inksci1 小时前
使用飞帆的上传组件
前端·javascript
里欧跑得慢1 小时前
微交互设计模式:提升用户体验的细节之美
前端·css·flutter·web