A mobile terminal unit distance rem

In doing mobile terminal development I am sure you will encounter adaptation problems, the phone's screen size has a lot of categories, using traditional px distance unit has been unable to meet our needs, so rem it turned out, he and the percentage of localization It is more like, but there are also some differences here would like to share rem to use them.

rem is a unit relative, his size can be set according to your calculations, such as the end of my mobile web page with the conversion rules rem px follows:

1 rem = 100 px

In my UI to design the artwork is 750px width of a standard design, so in the end my mobile web page on 750px standard provisions to rem conversion rules, see the following code:

(function(doc, win) {
  var docEl = doc.documentElement,
  resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
  recalc = function() {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    if (clientWidth > 750) {
      docEl.style.fontSize = "100px"; // 修正一下大于750的字体大小为100px
    } else {
      docEl.style.fontSize = 100 * (clientWidth / 750) + "px";
    }
    /*
     * 100 -> html,body {  font-size:100px; }
     * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面
     * 根据具体情况改变这两个数值
     */
  };

if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

The general principle is to monitor window resize, when the browser window size changes will trigger function I set to redefine rem conversion rule so that it can be adapted to different screen sizes distance unit.