App.vue

<template>
  <router-view></router-view>
</template>
<script setup>
import {onMounted, onUnmounted, ref} from "vue";

const flag = ref(false)

// 防止频繁触发
const onWindowResize = () => {
  if (!flag.value) {
    flag.value = true
    setTimeout(() => {
      initFontSize()
      flag.value = false
    }, 300)
  }
}

const initFontSize = () => {
  const viewWidth = document.getElementsByTagName('html')[0].getBoundingClientRect().width;
  const _html = document.getElementsByTagName('html')[0];
  if (_html) {
    _html.style.fontSize = 100 * (viewWidth / 1280) + 'px'
  }
}

onMounted(() => {
  initFontSize()
  window.addEventListener('resize', onWindowResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', onWindowResize)
})
</script>