vue2 字体大小自适应

在Vue2中实现字体大小的自适应可以通过以下步骤进行：

1. 使用CSS的`@media`查询来根据设备屏幕大小设置不同的字体大小。
2. 在Vue组件的样式中定义多个不同屏幕大小的字体大小。
3. 使用Vue的计算属性或者监听窗口大小变化来动态地应用适当的字体大小。

以下是一个简单的示例代码：

<template>
  <div class="container">
    <h1 :style="{ fontSize: computedFontSize }">自适应字体大小</h1>
  </div>
</template>

<script>
export default {
  computed: {
    computedFontSize() {
      if (window.innerWidth <= 480) {
        return '16px';
      } else if (window.innerWidth <= 768) {
        return '24px';
      } else {
        return '32px';
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 更新字体大小
      this.$forceUpdate();
    }
  }
};
</script>

<style>
.container {
  text-align: center;
}

h1 {
  font-size: 32px; /* 默认字体大小 */
}

@media (max-width: 480px) {
  h1 {
    font-size: 16px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  h1 {
    font-size: 24px;
  }
}
</style>

在这个示例中，我们使用了`@media`查询来定义不同屏幕大小下的字体大小，然后通过计算属性`computedFontSize`根据当前窗口大小动态地应用适当的字体大小。在窗口大小变化时，我们监听了`resize`事件并调用`handleResize`方法来更新字体大小。

这样，当用户在不同设备上访问应用时，字体大小会自动根据屏幕大小进行适应。你可以根据实际需求调整媒体查询和字体大小的设置。