write a mixins to dynamically set the font-size of html, because font-size only needs to be set once, so you only need to introduce this mixins in the entry js of each page.

//bodyFontSizeMixins.js
export default {
  data(){
    return {
      resizeTimer: null
    }
  },
  created(){
    this.initFontSize()
    window.onresize = () => {
      clearTimeout(this.resizeTimer)
      this.resizeTimer = setTimeout(() => {
        this.initFontSize()
      }, 500)
    }
  },
  methods: {
    initFontSize(){
      let width = document.documentElement.clientWidth || document.body.clientWidth
      this.contentHeight = document.documentElement.clientHeight || document.body.clientHeight
      const rem = width < 640 ? Number(width / 18.75).toFixed(1) : 22
      document.querySelector('html').style.fontSize = `${rem}px`
    }
  }
}

//app.vue
import setBodySize from {your path}/bodyFontSizeMixins
export default {
  mixins: [setBodySize],
}

mixins is a very flexible way to distribute reusable functionality in Vue components. Blending objects can contain any component option. When a component uses a blend object, all options for blending the object are mixed into the component's own options.

ide/mixins.html-sharp%E5%9F%BA%E7%A1%80" rel=" nofollow noreferrer "> mixins official document

cannot be written on css ? @ media

Import file main.js is fine