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

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()
})
相关推荐
A黄俊辉A20 分钟前
vue css中 :global的使用
前端·javascript·vue.js
小码哥_常34 分钟前
被EdgeToEdge适配折磨疯了,谁懂!
前端
小码哥_常1 小时前
从Groovy到KTS:Android Gradle脚本的华丽转身
前端
灵感__idea1 小时前
Hello 算法:复杂问题的应对策略
前端·javascript·算法
麦麦鸡腿堡2 小时前
JavaWeb_请求参数,设置响应数据,分层解耦
java·开发语言·前端
Dxy12393102163 小时前
CSS常用样式详解:从基础到进阶的全面指南
前端·css
IT_陈寒3 小时前
SpringBoot自动配置揭秘:5个让开发效率翻倍的隐藏技巧
前端·人工智能·后端
Moment3 小时前
前端工程化 + AI 赋能,从需求到运维一条龙怎么搭 ❓❓❓
前端·javascript·面试
Joker Zxc3 小时前
【前端基础(Javascript部分)】6、用JavaScript的递归函数和for循环,计算斐波那契数列的第 n 项值
开发语言·前端·javascript
Highcharts.js3 小时前
React 图表如何实现下钻(Drilldown)效果
开发语言·前端·javascript·react.js·前端框架·数据可视化·highcharts