后台管理项目——数据大屏如何实现自适应

在数据大屏中，我的页面画布大小固定为1980*1080，但是我电脑显示的范围宽度最多在1200，这就会导致有一些内容被挤出了屏幕外面，因此，要使画布自适应不同的设备，效果如图

1、先创建基本的结构

其中样式部分

父盒子container要求是和设备的宽高一致的

然后对于screen盒子，因为这个内容是主要的内容，固定在1920*1080这一个大小，才有fixed定位将这一个盒子定在屏幕处，  transform-origin: left top;设置左上角为基点，无法自适应

.container{
  width: 100vw;
  height: 100vh;
  background: url(./images/bg.png) no-repeat;
  background-size: cover;
  .screen{
    position: fixed;
    width: 1920px;
    height: 1080px;
    background-color: antiquewhite;
    left: 50%;
    top:50%;
    //基点
    transform-origin: left top;
    .top{
      width: 100%;
      height: 40px;
      background-color: #fff;
    }
    .buttom{
      display: flex;
      .right{
        flex: 1;
      }
      .left{
        flex:1
      }
      .center{
        flex:2
      }
    }
  }
}

3、对于屏幕自适应：采用的是sale

先获取screen这一个实例，然后组件挂载的时候进行自适应

window.onresize是解决拖动改变container的大小自适应的问题

//获取数据大屏展示内容盒子的dom元素
let screen=ref()

onMounted(()=>{
  screen.value.style.transform=`scale(${getScale()}) translate(-50%, -50%)` 
  // console.log(getScale());
  
})


//数据大屏的缩放比例
let getScale=(w=1920,h=1080)=>{
  const ww=window.innerWidth/w
  const wh=window.innerHeight/h
  return ww<wh?ww:wh
}

//监听视口的变化
window.onresize=()=>{
 screen.value.style.transform=`scale(${getScale()}) translate(-50%, -50%)` 
}