数据大屏的适配方案

1.封装一个全局组件，命名为ScreenAdapter，内容如下：

<template>
  <div
    class="ScreenAdapter"
    :style="style"
  >
    <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
      return w < h ? w : h
    },
    // 设置比例
    setScale() {
      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>

2.将此组件作为外壳，包在我们搭建的页面上

<ScreenAdapter> <div>大家好，我是大屏展示页面</div> </ScreenAdapter>

3.定义网页规范
根据美工给出的设计（主要获取美工给出的分辨率，如1920*1080）。
Div布局多采用flex+百分比布局（当然也可以根据美工给出的设计，默认写px。）。
各类空间设计，根据美工给出的px进行定义即可

注意事项：

问题1：加入后出现留白的情况
解决方案：是因为注入的宽高，跟电脑实际分辨率宽高不一致的原因

问题2：注入的宽高，跟分辨率宽高一致，为什么还有留白？ 解决：
一致的话，只需要将浏览器全屏就可以看到正确的效果.
将注入的宽高换成document.documentElement.clientWidth、document.documentElement.clientHeight。即使不全屏也可以得到正确的结果