Vue-Vant—纯JS实现rem与px换算

一、概述

不利用插件，手写JS实现rem与px的换算。已知1rem等于根标签的字体大小。

二、详解

如下代码所示，假设640的设计稿，设定1rem等于10px。

; (function (win) {
  // 获取根标签
  var docEl = document.documentElement;
  // 定时器
  var _t;

  function refreshFn() {
    // 获取窗口的宽度
    var _width = docEl.getBoundingClientRect().width;
    if (_width > 640) {
      _width = 640;
    }
    var _rem = _width / 64;
    // 为根标签html设置font-size，即1rem等于多少px
    docEl.style.fontSize = _rem + 'px';
  }

  // 绑定resize事件，浏览器窗口改变大小时触发
  win.addEventListener('resize', function () {
    // 清空定时器
    clearTimeout(_t);
    // 重新设置定时器
    _t = setTimeout(refreshFn, 300);
  });
  // 直接触发一次方法，设置rem和px的换算比例
  refreshFn();
}(window));