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

演绎那段情
  • 658

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

回复
阅读 1.8k
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官方文档

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏