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>