rem的实现原理

em和rem在逻辑上的差别仅仅是参照对象不同，em是参照父元素的字体大小，rem是参照根目录HTML的字体大小。

(function(win, doc){
  var resize = 'orientationchange' in window ? 'orientationchange' : 'resize';//orientationchange：移动端存在的监听事件
  function change(){
    var html = doc.documentElement;
    var width = doc.documentElement.clientWidth || win.innerWidth
    html.style.fontSize = width / 72 + 'px';// 除以的数字根据效果图给的基准（一般移动端效果图750px、PC端1440px），得到一个相对容易计算的数值，就可以进行rem的使用了	
  }
  change();
  win.addEventListener(resize, change, false);
  win.addEventListener('load', change, false);
  doc.addEventListener('DOMContentLoaded',change, false);
})(window, document);  

比rem更好的方案　

vw & vh

vw - 视口宽度的1/100；vh - 视口高度的1/100

vw还可以和rem方案结合，这样就不需要使用js计算HTML字体的大小

html {fons-size: 1vw} /* 1vw = width / 100 */
p { 15.625rem}