持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

写在前面

前面博主写过一篇文章面试官：除了 HTTP，你还用过什么通信协议？(Websocket 在数字孪生中的应用)，简述了数字孪生产品的数据更新机制，对于数字孪生产品来说，数据非常重要，孪生世界的数据呈现可以反映现实世界的真实情况，而在数据展示中，除了数据更新机制之外，还有一个非常非常重要的东西，那就是可视化表格的展现，而由于数字孪生可视化界面主要用于展示数据，因此在大部分应用场景中，它经常被放到各式各样的展示屏幕展示，可能是普通的电脑屏幕，可能是平板，也有可能是好几块屏幕组成的可视化大屏系统，那么表格的自适应便成了展示的重要衡量标准，如何完成自适应调整，将在产品体验中占据非常重要的比重！

各自适应方案对比

百分比自适应方案

按百分比实现自适应应该是最最简单的方式了，不需要额外增加如何配置，即可实现，我们来做个试验测试一下按百分比实现自适应的效果

<template>
  <div class="box">
    <div class="inner-box">
    </div>
  </div>
</template>
<style lang='scss' scope>
  .box {
    width: 100vw;
    height: 100vh;
    .inner-box {
      width: 20%;
      height: 20%;
      background: cadetblue;
    }
  }
</style>

我们先定义一个外部容器 box ，然后在 box 里创建一个用于自适应的长方形 inner-box，然后将自适应长方形宽和高都设置为20%

GIF 2022-6-8 23-16-02.gif 我们可以看到，当我们将其宽高都设置为百分比时，window 的宽、高变化时，长方形的宽和高也将随着发生变化，可以实现初步的自适应。

而当我们将这样一个自适应方案应用到数字孪生可视化界面上时，我们会发现，效果有点差强人意

GIF 2022-6-8 23-30-59.gif

通过我们模拟占位的表格可以很明显看出，当我们对窗口进行横向和竖向的缩放时，左右边的表格是进行了自适应的，而由于在这个自适应方案中宽和高并没有什么联系，导致了宽高各自自适应，最终导致了表格宽高比例严重失衡，展现得非常 ugly，所以，这个方案在数字孪生可视化这个应用场景中并不适合。

Rem + Resize

第二个方案采用的是 rem，而 rem 的原理是根据根元素 fontsize 来计算 rem 的单位长度，那么我们就可以通过监听 window 的 resize，动态修改 fontsize，进而影响 rem，最终达到自适应的效果，下面我们做个测试

// resize.js
const scaleListener = () => {
  window.addEventListener('resize', resize)
  console.log('scaleListening......')
}
const resize = () => {
  // 与原来 1080 的比值
  let scale = window.innerHeight / 1080
  document.documentElement.style.fontSize = `${16 * scale}px` 
  console.log('resize')
}
export {
  scaleListener
}

// APP.vue
<script>
import { scaleListener } from '../src/components/resize/resize';
export default {
  mounted() {
    scaleListener()
  },
}
</script>