移动端页面单位的选择（px, em, rem, vw）

px, em, rem的区别：

px:绝对字体大小
em:基于一个基数来计算出相对字体大小。(移动端用的少)
rem:基于根节点（html）的字体大小来计算。
vw:可视区宽度单位。1vw等于可视区宽度的百分之一。

em

跟字体大小有关

l浏览器默认字体是16px,这里父级字体大小是20px,所以#box里的1em = 20px;即#box是一个长宽均为400px的正方形

vw

vw单位和百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关
以414宽度的屏幕为例
做一个200 * 200的盒子

rem

rem 的字体大小直接与html的字体大小有关。默认是16px = 1rem;
我们可以给html设置10px的字体大小

html {
  font-size: 10px    /*即： 10px = 1rem*/
}

大多数浏览器（不包括ie8以下）都支持rem单位，如果想都支持，可以

html{
  font-size: 10px    /* 或者 font-size: 62.5%*/  /* 10/16 = 62.5%*/
}
p{ font-size:15px; font-size:1.5rem}

可是这样在实际开发中，换算起来非常麻烦，所以，我们对此进行了修改，根据手机屏幕的大小，做了自适应。
首先，我们在html的head里边设置html的font-size.

然后根据设计图的尺寸和手机屏幕的尺寸进行换算。

//  designWidth: 设计稿的实际宽度值
//  maxWidth: 制作稿的最大宽度值
;(function(designWidth, maxWidth){
  var doc = document,
  win = window,
  docEl = doc.documentElement,
  remStyle = doc.createElement("style"),
  tid;
  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    maxWidth = maxWidth || 540;
    width > maxWidth && (width = maxWidth);
    var rem = width * 100 / designWidth;
    remStyle.innerHTML = 'html{font-size:' + rem + 'px}';
  }
  if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(remStyle);
  } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
  }
// 要等viewport设置好后才能执行refreshRem，不然会执行2次
refreshRem();
win.addEventListener("resize", function() {
  clearTimeout(tid);  // 防止执行2次
  tid = setTimeout(refreshRem, 300)
},false)
win.addEventListener("pageshow", function(e){
  if(e.persisted) {
    clearTimeout(tid)  
    tid = setTimeout(refreshRem, 300)
   }
  }, false)
if (doc.readyState === "complete"){
  doc.body.style.fontSize = "16px"
 } else {
    doc.addEventListener("DOMContentLoaded",function(e){
    doc.body.style.fontSize = "16px"
  }, false)
 }
})(750, 750)