js动态设置rem

• rem是相对应的根标签的字体大小的系数单位

• 不同浏览器根标签的默认字体大小不一样，所以js动态设置

• 在750的设计图下，我们为了便于开发将根元素的字体大小设置成100px

  • 100px是一个单位，是750/7.5得出
  • 道理是750，我自己分成7.5份出去，每份是100px长度，那么设计图中的一个div好比宽是160px，160/100，得出这个div占据1.6个单位，也就是1.6rem
  • 若不进行7.5的分割，那么直接将根元素设置成750px，子div比较得出 160/750 = 0.2133333 rem，太麻烦，

• 设计图一般是750px，客户屏幕超过750px，就按照最大750px，且居中显示

  (function(doc, win) {
      var docEl = doc.documentElement,
          resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function() {
              if (docEl.clientWidth > 750) {
                  docEl.style.fontSize = "100px";
                  doc.getElementById("app").style.width = "750px";
              } else {
                  var width = docEl.clientWidth / 7.5;
                  docEl.style.fontSize = width + "px";
                  doc.getElementById("app").style.width = "auto";
              }
          };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener("DOMContentLoaded", recalc, false);
  })(document, window);