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);