前端大屏自适应

参考自前端大屏自适应
内容主要是上面的链接，需要补充的是，给定的宽度高度一定要是设计稿主体内容实际的高度，有些设计稿已经考虑了浏览器的导航栏。
然后刚好我这时候做的页面，要求不要在两边留白屏，那就缩放之后再调一下页面尺寸

要求

各种分辨率下

1. 页面占满全屏，不能有白边，不能有滚动

2. 图标等比例缩放，不能变形失真

3. 各卡片内的文字内容正常显示，不能挤出卡片外

缩放之后有两可能，更高，更宽。
更宽：
首先进行等比例缩放，这时两边会有白边，将页面宽度调大，此时
width(实)=width(设计稿) x [ height(窗口) / height(设计稿) ]
希望达到的效果，width(实) = width(窗口)，则令
width(设计稿) = width(窗口)/[ height(窗口) / height(设计稿) ]
更高：
首先进行等比例缩放，这时上下会有白边，将页面高度调大，此时
height(实)=height(设计稿) x [ width(窗口) / width(设计稿) ]
希望达到的效果，height(实) = height(窗口)，则令
height(设计稿) = height(窗口)/[ width(窗口) / width(设计稿) ]

最后css中使用一些calc来适配，我这里的布局大概是一个三栏布局，中间一个折线图，两边信息展示，有表格。更宽就让中间折线图更宽，更高时就让折线图和表格更高。

<template>
  <div
    class="ScaleBox"
    ref="ScaleBox"
    :style="{
      width: width + 'px',
      height: height + 'px'
    }"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ScaleBox',
  props: {
    width: {
      type: Number,
      dafault: () => 1920
    },
    height: {
      type: Number,
      dafault: () => 1080
    },
  },
  data() {
    return {
      scale: 0
    };
  },
  mounted() {
    this.setScale();
    window.addEventListener('resize', this.debounce(this.setScale));
  },
  methods: {
    getScale() {
      // 按照给定的宽高比，计算出最合适的缩放比
      const { width, height } = this;
      let TopHeight = 0;
      console.log(this.isOuter);
      TopHeight = document.getElementById('app').getElementsByClassName('main-nav-menu-wrap')[0].offsetHeight;
      console.log(TopHeight);
      const wh = (window.innerHeight - TopHeight) / height;
      const ww = window.innerWidth / width;
      // dpr
      console.log(ww < wh ? ww : wh);
      return ww < wh ? ww : wh;
    },
    setScale() {
      // 获取到缩放比例，设置它
      this.scale = this.getScale();
      if (this.$refs.ScaleBox) {
        this.$refs.ScaleBox.style.setProperty('--scale', this.scale);
      }
    },
    debounce(fn, delay) {
      const delays = delay || 500;
      let timer;
      return function () {
        const th = this;
        const args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(function () {
          timer = null;
          fn.apply(th, args);
        }, delays);
      };
    }
  }
};
</script>

<style lang="scss">
#ScaleBox {
  --scale: 1;
}
.ScaleBox {
  position: absolute;
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  z-index: 999;
}
</style>