css 全屏等比缩放 使用transform

使用css单位 放大缩小自适应全屏等比缩放

组件 aaa 直接复制代码，中间还emit 发射监听屏幕变化
使用
<aaa><div>内容</div></aaa>

<template>
  <div
    :style="style"
    class="ScreenAdapter"
  >
    <slot />
  </div>
</template>
<script>
export default {
  name: '',
  // 参数注入
  props: {
    width: {
      type: String,
      default: '1920'
    },
    height: {
      type: String,
      default: '1080'
    }
  },
  data() {
    return {
      style: {
        width: this.width + 'px',
        height: this.height + 'px',
        transform: 'scale(1) translate(-50%, -50%)'
      }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 1000)
  },
  methods: {
    Debounce: (fn, t) => {
      const delay = t || 500
      let timer
      return function() {
        const args = arguments
        if (timer) {
          clearTimeout(timer)
        }
        const context = this
        timer = setTimeout(() => {
          timer = null
          fn.apply(context, args)
        }, delay)
      }
    },
    // 获取放大缩小比例
    getScale() {
      const w = window.innerWidth / this.width
      const h = window.innerHeight / this.height
      // console.log(window.innerWidth, this.width, w)
      // console.log(window.innerHeight, this.height, h)
      // 屏幕变化
      this.$emit('onresize')
      return w < h ? w : h
    },
    // 设置比例
    setScale() {
      console.log(this.getScale())
      this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'
      console.log('任你千变万化,我都不会影响性能')
    }
  }
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  // background: red;
}
</style>