使用transform进行页面适配

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

在之前的项目中我大多是直接引入lib-flexible进行适配，但是基于lib-flexible将单位转化（px->rem）的这种适配形式和echarts创建的图表并不是非常契合；

理由如下：

由echarts创建的图例的位置和图表的大小会变得不好控制，因为由echarts创建的内容单位为px，并不会随着页面尺寸的变化而变化；
同上由echarts创建的图表的大小也会变得不好控制；
由于通过CSS设置的表单和页面的大部分样式都会因为单位设置为rem而跟随页面尺寸变化，所以页面中为图表创建的外部样式就会变形；

总而言之就是页面样式因为页面的尺寸相应的进行了变化，但是由echarts创建的图表并没有，那么整体的展示就不理想；

我目前接触到的大屏大多是由多个不同类型的图表或者表单组成的，而所有的基于echarts创建的图表都会有上述的问题；

这就导致如果基于lib-flexible将单位转化（px->rem）的形式进行页面的适配，大屏的中的内容就会变形，就像是本来用正方型(4x4)里画一个圆，但是现在正方形(4x4)变成了长方形(2x8)，很显然里面的圆就无法正常展示了；

而大屏肯定是要根据尺寸尽量将内容完整的展示出来，所以最好采用transform对页面进行整体的缩放，下面记录了使用transform进行适配的方法完整方法：

<template>
  <div class="app" ref="box">
    <div></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    };
  },
  mounted () {
    // 调用setScale，并设置事件监听
    this.setScale();
    window.addEventListener("resize", this.setScale);
  },
  methods: {
    getScale () {
      // 计算屏幕可视高度和宽度与屏幕的宽高的比例
      // 为了内容能够在屏幕中完整的显示，取两者之间小的值
      const width = window.screen.width;
      const height = window.screen.height;
      let ww = window.innerWidth / width;
      let wh = window.innerHeight / height;
      return ww < wh ? ww : wh;
    },
    setScale () {
      let scale = this.getScale();
      this.$refs.box.style.setProperty("--scale", scale);
    },
  },
  destroyed () {
    // 页面销毁时移除监听事件
    window.removeEventListener('resize', this.setScale);
  }
};
</script>
// 设置css变量 --scale，用于控制缩放比例
<style scoped lang="less">
.app {
  --scale: 1;
  width: 1920px;
  height: 1080px;
  background-size: 100% 100%;
  position: absolute;
  transform: scale(var(--scale)) translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 50%;
  top: 50%;
}
</style>

PS：由于使用的是整体缩放的方法，所以会有清晰度的问题，使用的时候要注意是否有清晰度的要求