数据大屏解决方案scale

最近公司之前的数据大屏 进行一个UI的调整 但是我看之前的数据大屏在自适应方面做得并不好 所以在网上冲浪过后 选择了使用scale来解决数据大屏的适配

一 dom结构

<div id="container">
    <div id="box"></div>
</div>

二 dom样式

#container{
    width: 100vw;
    height:100vh;
    position: relative;
}
#box{
    width: 1632px;//设计图宽度
    height: 840px;//设计图高度
    left: 50%;
    top: 50%;
    margin-right: -50%;
    transform-origin: left top;
    position: absolute;
    display: flex;
    flex-direction: column;
}

三 通过scale控制大屏的放大与缩小

let box = document.getElementById('box')；//数据大屏的父盒子
let container  = document.getElementById('container')//数据大屏的盒子
function getScale(w=1632,h=840){
    //w 设计图的宽  h 设计图的高
    //ww 数据大屏可以占有的宽与设计图的宽之比
    //wh 数据大屏可以占有的高与设计图的高之比
    const ww = container.getBoundingClientRect().width / w
    const wh = container.getBoundingClientRect().height / h
    console.log(ww,wh)
    return ww < wh ? ww : wh
}
console.log('scale',getScale())
box.style.transform = 'scale(' + getScale() + ') translate(-50%,-50%)'
window.addEventListener('resize',function (){
    box.style.transform = 'scale(' + getScale() + ') translate(-50%,-50%)'
})

有需要可以试试

本人前端小白 发布文章只是记录自己开发学习中的一些有用的方法 大佬轻喷