数据大屏适配解决方案

做数据大屏时，因为显示器尺寸不同，会导致展示的时候有留白区域，效果不好，所以得做一个适配方案。

1.rem 方式

在vue项目中的index.html中加上

function getRem() {
   var html = document.getElementsByTagName("html")[0];
   var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
   html.style.fontSize = 1 * (oWidth / 1920) + "px";
 }

 window.onload = function() {
   /*初始化*/
   getRem();
   /*getRem绑定监听*/
   window.addEventListener("resize", getRem, false);
 };

然后在大屏中相关的尺寸单位使用rem 即可，注意：1rem=根标签（html）的fontSize，
通过上面的设置，如果设计图宽是1920px，则大小按设计图来就行，只是单位为rem，
比如设计图中是20px，那编写时改成20rem就行。

坑点： 仅能满足一些特定的小场景，大屏中的实施非常不友好，例如我们覆盖element表格中的为font-size：0.5rem。此时投放到大屏，字体是自适应的，但其组件的多种默认属性用px为单位。如line-height的设置为22px，此时覆盖样式后的字体过大，并不能适应行高，就会出现文字重叠等错乱问题。

2.scale 方式

我们整个大屏的尺寸设置和设计图一样，只是通过css的scale放大缩小属性，来控制实际展示的大小。
通过监听浏览器窗口的大小，来改变scale的比例，从而实现数据大屏适配。（百度、网易等大数据适配的解决方案均是这个）
封装一个组件,命名为ScreenAdapter

<template>
  <div class="outContainer" :style="{height:boxHeight,width:boxWidth}">
    <div
        class="ScreenAdapter"
        :style="style"
    >
        <slot />
    </div>
  </div>

</template>
<script>
export default {
  name: '',
  //参数注入
  props: {
    width: {
      type: String,
      default: '1920' 
    },
    height: {
      type: String,
      default: '1080' 
    }
  },
  data() {
    return {
        boxWidth:this.width,
        boxHeight:this.height,
        style: {
            width: this.width + 'px',
            height: this.height + 'px',
            transform: 'scale(1) translate(-50%, -50%)'
        }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = this.Debounce(this.setScale, 200)
    // window.οnresize=this.setScale
  },
  destroyed(){
    window.removeEventListener("resize",this.Debounce(this.setScale, 200));
  },
  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() {
        //容器高度
        this.boxWidth=(document.body.clientWidth)+'px'
        this.boxHeight=(document.body.clientHeight)+'px'

        let w;
        w = (document.body.clientWidth)/ this.width
       
        return w
    },
    // 设置比例
    setScale() {
      this.style.transform = 'scale(' + this.getScale() + ') translate(0, 0)'
      
	  //解决改变窗口大小时，意外出现滚动条问题
      this.$nextTick(()=>{
           this.style.transform = 'scale(' + this.getScale() + ') translate(0, 0)'
        })
    },
  }
}
</script>
<style lang="less" scoped>
.ScreenAdapter {
  overflow-y: scroll;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  transform-origin: 0 0;
  position: absolute;
  left: 0;
  right: -17px;
  transition: 0.3s;
}
.ScreenAdapter::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.outContainer::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.outContainer{
    overflow-y: scroll;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    position: relative;
}
</style>

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

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

使用：
在ScreenAdapter组件内正常编写即可，尺寸和设计图一样，设计图是20px，就写20px，不需要有其他的考虑（百分百尺寸等），懒人专用！

2.3.效果展示

随意更改展示尺寸或者按F11进行全屏展示，都会占满宽，高度自适应。如果展示尺寸等于设置时的尺寸（比如1920*1080）那么会刚刚好占满全屏
如果是vue2的项目，直接复制代码使用即可

有问题欢迎讨论！
参考地址 ：https://juejin.cn/post/6972416642600927246