vue 大屏scale适配方案 留白和不留白

以前写的大屏都是固定尺寸的大屏投在固定的屏幕上就没有做适配，但是最近做三张pc的大屏要求要做适配，上网查了查很多适配方法找来找去还是觉得缩放最好，代码量少适配的还是不错的就研究了下 原理其实很简单就是根据视口的宽高比和设计稿的宽高比作比较选取合适的缩放比列，我在项目中用的是留白的方案，废话不多说直接上代码

ps最好把它封装成一个组件这样就可以重复调用

1.动态的设置容器的宽高

//新建一个vue文件、
<template>
  <div class="screen" ref="ScaleBox" :style="{ height: height + 'px', width: width + 'px' }"></div>
</template>

//data中的数据

  data() {
    return {
      width: 1920,
      height: 1080,
      scale: 0,
    };
  },

2.计算需要缩放的比例

 getScale() {
      let { width, height } = this;
      let scaleWidth = window.innerWidth / width;
      let scaleHeight = window.innerHeight / height;
      return scaleWidth < scaleHeight ? scaleWidth : scaleHeight;
    },

//算出比例

3.设置比例

 setScale() {
      this.scale = this.getScale();
      console.log(this.scale);
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty("--scale", this.scale); //动态设置--scale的值
      }
    },
  },

4.css代码

.screen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: scale(var(--scale)) translate(-50%, -50%);
  transform-origin: 0 0;
  transition: 1s;
  z-index: 999;
  .child {
    height: 100%;
    width: 100%;
    background-color: greenyellow;
  }
}

上面在这种事高度过高两边留白 宽度过宽的话上下留白 最好是在最外层的div设置与大屏背景图片相似的颜色

要想不留白的话就需要同时设置大屏 宽的缩放 和高的缩放 就是在上面2步骤中return出两个比例 在3.中设置两个自定义css变量去接收 在css中分别把第2步骤中返回的两个缩放比设置到transform 的scaleY scaleX中去就可以得到一个不留白的大屏了