vue2大屏可视化之scale适配方案

1、应公司要求：需要开发一组大屏页面，经过讨论选择了scale的适配方案

优点：等比缩放，可以严格按照设计稿的尺寸开发，不需要转换单位，便捷。

缺点：严格按照要求的尺寸缩放，当不是定义的尺寸时会有留白，页面缩放过小字体会模糊

// 可以给外面的div加一个全屏的背景色或者背景图片，不同尺寸会有留白，体验感会好一点
<div>
    <div :class="clickNum == 'clickSecond' ? 'contain2' : 'contain'" id="home" ref="home">
    </div>
</div>


``````````
 mounted(){
      this.f()
      window.addEventListener("resize", this.f);
    },
methods: {
f() {
        var w = window.innerWidth; //获取窗口宽度
        var h = window.innerHeight;//获取窗口高度
        const w_w = this.$refs.home.offsetWidth;//获取元素宽度
        const h_h = this.$refs.home.offsetHeight;//获取元素高度
        let num = 0;
        w / h > w_w / h_h ? (num = h / h_h) : (num = w / w_w); 
        // 窗口宽/窗口高>元素宽/元素高
        home.style.transform = `translate(-50%, -50%) scale(${num})`;
      },
},

`````````
// 我这边要求的1920 * 1080，可以根据要求设置
<style lang="scss" scoped>
#home {
  width: 1920px;
  height: 1080px;
  background-color: rgb(16, 179, 111);
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all 1s;
}
</style>

2.留白情况就是类似于这种，后面可以加一个与大屏颜色相近的背景图