vue多页应用与页面适配的问题

Question

项目开发用了vue框架 是一个PC多页应用 有一个页面是全屏的 19201080的设计图 这个页面需要在19201080下适应，也要在3840*2160上适配 我想用rem来做动态设置html的font-size 就是在resize的时候改变html的字体大小，但是这个动态设置的代码该写在哪里呢 多页一般有js vue html三个文件？

Answer 1

入口文件 main.js 引入就可以了

Answer 2

写在css上不行？@media

Answer 3

写一个mixins来动态设置html的font-size ，因为font-size只需要设置一次，所以只需在每个页面的入口js中引入这个mixins就可以了。

//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) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixins官方文档