单模块自适应大小

1、npm 下载  

"element-resize-detector": "^1.2.4"

2、页面引入

import elementResizeDetectorMaker from "element-resize-detector";

3、页面使用

<div id="fillInRem"></div>

mounted() {//实例被挂载后调用
  let that = this;
  that.erd = elementResizeDetectorMaker()
  that.erd.listenTo(document.getElementById("fillInRem"), function (element) {
    //监听div宽度变化
    // let width = element.offsetWidth
    // let height = element.offsetHeight
    let width = window.innerWidth
    let height = window.innerHeight
    // console.log(width)
    console.log(height)
    that.$nextTick(function () {

      let fontSize = height / 100 + 'px';
      let html = document.documentElement;
      html.style.fontSize = fontSize;
      console.log('fontSize',html.style.fontSize)
    })
  })
},

destroyed() {
  this.erd.uninstall(document.getElementById("fillInRem"))
},

4、比例自己算

5、样式

1px = 0.12484394506866417rem = 1/(（window.innerHeight）/100)

<style lang="scss" scoped>

$remPx1:0.12484394506866417rem;

</style>