rem在vue中的使用

rem是什么？  它是一个相对单位，像px，vh，vw等一样，可以用来表示尺寸单位。

rem之所以可以用于自适应布局，是因为rem是一个相对尺寸，它只相对于html根元素来进行计算

所以，在不同的页面大小中，只要改变html根元素的大小，其他所有元素便会跟着改变

        首先要知道，浏览器的默认字体高都是16px，所以可以这样理解，1rem 就等于 16px   (1rem = 16px)

因为其他元素要相对于跟元素的大小来进行计算，所以为了方便使用就有了如下操作：

html{
    font-size: 62.5%;
}

怎么样理解呐？

首先，这样做是为了方便计算，使用，因为在使用rem来进行自适应布局的时候，其他所有元素的尺寸都是相对于根元素来进行计算，那么之前说过浏览器默认的1rem=16px，如果我想要给某一个字体设置为12px的大小，应该写零点几rem呐？这时候就不太方便计算，所以，我们可以重置根元素 的字体大小，为一个整数，这样方便参考计算

而又可以这样理解，1rem=100%=16px，将100%分为16等分，每一等分就是6.25%，即1px=6.25%，那么为了方便计算，我们可以重新设置html根元素的大小为10px，即  10x6.25%=62.5%，那么这个时候html根元素的大小为10px，想要设置某一个字体的大小为12px，则可以font-size: 1.2rem；以此类推。

而要实现自适应布局，则根元素的大小必须是可变的，所以需要在不同的屏幕尺寸下分别设置html根元素的字体大小，在vue中的应用如下：

(function (win) {
  var doc = win.document
  var docEl = doc.documentElement
  var tid

  function refreshRem () {
    var width = docEl.getBoundingClientRect().width
    // console.log('视窗宽度')
    // console.log(width)
    // if (width > 640) {// 最大宽度
    //   width = 640;
    // }

    var rem = width / 6.4
    docEl.style.fontSize = rem + 'px'

    // 当显示屏分辨率为1920*1080，且UI设计图尺寸为1920*1080
    // 可设置根元素大小为10px，如下：
    // docEl.style.fontSize = width / 192
    // 实际使用：字体大小16px，为1.6rem
  }

  win.addEventListener(
    'resize',
    function () {
      //当调整浏览器窗口大小时，发生 resize 事件。
      // console.log('浏览器窗口大小发生变化resize~~')
      this.clearTimeout(tid)
      tid = this.setTimeout(refreshRem, 300)
    },
    false
  )
  win.addEventListener(
    'pageshow',
    function (e) {
      //事件在每次加载页面时触发,类似于 onload 事件
      // console.log('页面加载事件pageshow~~')
      if (e.persisted) {
        this.clearTimeout(tid)
        tid = this.setTimeout(refreshRem, 300)
      }
    },
    false
  )

  refreshRem()
})(window)