vue3字体跟随窗口大小变化

可以使用 CSS 中的 @media 查询和 vw/vh 单位来实现字体随窗口大小变化。具体实现方法可以参考以下代码：

@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}

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

其中，max-width 和 min-width 分别表示窗口宽度的最大值和最小值，可以根据实际需求进行调整。vw 和 vh 分别表示视口宽度和高度的百分比，可以用来设置字体大小。

相关问题

vue监听窗口大小变化

可以使用Vue的watch属性来监听窗口大小变化。具体实现如下：

data() {
  return {
    windowWidth: window.innerWidth
  }
},
created() {
  window.addEventListener('resize', this.handleResize)
},
destroyed() {
  window.removeEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.windowWidth = window.innerWidth
  }
}

在上面的代码中，我们首先在data中定义了一个windowWidth属性，用来存储当前窗口的宽度。然后在created钩子函数中，我们添加了一个resize事件监听器，当窗口大小发生变化时，会触发handleResize方法。在handleResize方法中，我们更新windowWidth属性的值，从而实现对窗口大小变化的监听。

vue监听窗口大小变化 自动缩放

Vue可以通过监听窗口大小变化来实现自动缩放的效果。在Vue中，可以使用`@resize`事件来监听窗口大小变化，并在事件处理函数中更新组件的样式或其他属性。

例如，在一个需要自适应的组件中，可以使用如下代码来实现：

<template>
  <div class="container" :style="{ width: containerWidth + 'px', height: containerHeight + 'px' }">
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      containerWidth: window.innerWidth,
      containerHeight: window.innerHeight
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.containerWidth = window.innerWidth
      this.containerHeight = window.innerHeight
    }
  }
}
</script>

在上述代码中，我们在组件中定义了一个`container`容器，使用`:style`绑定了容器的宽度和高度，这样容器的大小会随着窗口的大小变化而自动调整。在组件的`data`属性中，我们初始化了容器的宽度和高度为当前窗口的宽度和高度。在`mounted`中，我们通过`window.addEventListener`添加了一个窗口大小变化的事件监听器，监听到窗口大小变化的时候会触发`handleResize`方法来更新容器的宽度和高度。在`beforeDestroy`中，我们通过`window.removeEventListener`移除了监听器，以免在组件销毁的时候出现问题。

通过上述代码，我们就可以在Vue中实现窗口大小变化自动缩放的效果了。