vue中响应式布局如何将字体大小改成自适应

当视口的宽度发生变化时，通过响应式布局来适配不同终端设备的屏幕尺寸是非常重要的。其中，一个关键的问题是如何使字体的大小自适应。Vue.js通过提供内置directive，即 v-bind:class，以及CSS Flexbox来解决这个问题，下面是完整攻略。

1. 使用CSS中的rem

rem是CSS的一个相对单位，它是相对于根元素的字体大小进行计算的。在viewport发生变化时，使用媒体查询来改变根元素的字体大小，以此作为全局的字体大小，可以实现自适应字体的效果。具体代码如下：

html {
  font-size: 16px;
}

@media screen and (max-width: 320px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 321px) and (max-width: 640px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 641px) {
  html {
    font-size: 18px;
  }
}

在以上代码中，我们设置了根元素的默认字体大小为16px。当屏幕宽度小于等于320px时，字体大小变为14px；当屏幕宽度在321px-640px之间时，字体大小恢复为16px；当屏幕宽度大于等于641px时，字体大小变为18px。

然后，在Vue.js的代码中，我们可以使用rem作为字体大小单位进行布局。例如：

<template>
  <div class="container">
    <h1 class="title">Hello Vue.js</h1>
    <p class="description">这是一段描述性文字，字体大小使用rem进行布局</p>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 2.5rem;
  margin: 1rem 0;
}

.description {
  font-size: 1rem;
  margin: 0.5rem 0;
  text-align: center;
}
</style>

在上述代码中，我们使用了rem单位来设置h1和p标签的字体大小，这样在整个页面中，字体大小是根据viewport大小自适应的。

2. 使用Vue.js自带的v-bind:class指令

除了使用CSS中的rem来实现自适应字体外，Vue.js还提供了v-bind:class指令，可以通过计算属性动态地添加字体大小自适应所需要的类名样式。具体代码如下：

<template>
  <div class="container">
    <h1 :class="['title', titleSizeClass]">Hello Vue.js</h1>
    <p :class="['description', descriptionSizeClass]">这是一段描述性文字，字体大小使用class指令进行动态添加</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewportWidth: 0 //用于记录viewport宽度的数据
    }
  },
  mounted() { //在组件加载时绑定viewport的resize事件监听器
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() { //在组件卸载时移除事件监听器
    window.removeEventListener('resize', this.handleResize)
  },
  computed: { //计算属性，返回title和description的自动适应字体大小的类名
    titleSizeClass() {
      if (this.viewportWidth <= 320) {
        return 'text-xs'
      } else if (this.viewportWidth > 320 && this.viewportWidth <= 640) {
        return 'text-sm'
      } else if (this.viewportWidth > 640 && this.viewportWidth <= 1024) {
        return 'text-md'
      } else {
        return 'text-lg'
      }
    },
    descriptionSizeClass() {
      if (this.viewportWidth <= 320) {
        return 'text-xs'
      } else if (this.viewportWidth > 320 && this.viewportWidth <= 640) {
        return 'text-sm'
      } else if (this.viewportWidth > 640 && this.viewportWidth <= 1024) {
        return 'text-md'
      } else {
        return 'text-lg'
      }
    }
  },
  methods: { //方法，用于处理viewport宽度发生变化时，计算title和description的字体大小自动适应的类名
    handleResize() {
      this.viewportWidth = window.innerWidth
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  margin: 1rem 0;
}

.description {
  margin: 0.5rem 0;
  text-align: center;
}

.text-xs {
  font-size: 1rem;
}

.text-sm {
  font-size: 1.2rem;
}

.text-md {
  font-size: 1.5rem;
}

.text-lg {
  font-size: 1.8rem;
}
</style>

在上述代码中，我们在mounted钩子函数中绑定了resize事件的监听器，同时在beforeDestroy钩子函数中移除监听器，确保在组件卸载时事件被移除。通过计算属性titleSizeClass和descriptionSizeClass返回相应viewport下的动态字体大小类名，然后通过将类名绑定到相应的h1和p标签中，来完成自适应字体的效果。