可视化数据大屏基于scale自适应方法动态适配各种分辨率，兼容大小屏

无论屏幕如何变化，屏幕的内容都是等比缩放展示

HTML部分

css部分

body{
    width: 100vw;
    height: 100vh;
    background: url("./assets/images/main/skin-whitemove-bg.gif") repeat !important;
}
#app {
    width: 1920px;  // 根据设计图实际尺寸开发
    height: 1080px;  // 根据设计图实际尺寸开发
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
}

星空背景素材

skin-whitemove-bg.gif

js部分

import { ref,onMounted } from 'vue'
import {debounce} from "lodash";
// 大屏适配
const setScale = () => {
  let designWidth = 1920;//设计稿的宽度，根据实际项目调整
  let designHeight = 1080;//设计稿的高度，根据实际项目调整
  let scale = document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ?
      (document.documentElement.clientWidth / designWidth):
      (document.documentElement.clientHeight / designHeight);
  document.querySelector('#app').style.transform = `scale(${scale}) translate(-50%,-50%)`;
}

onMounted(()=>{
  setScale()
  setTimeout(()=>{
    document.querySelector('#app').style.transition = 'transform 0.25s linear';  // 增加动画效果
  },500)
  window.onresize = debounce( ()=>{
    setScale()
  },100)
})