移动端适配

对于移动端适配有多种方式，如：
百分比：宽度用百分比，高度不限，相对父元素；
vm|vh：知道 （100vw和100vh）的都知道，1vh或者1vw就代表着高度或者宽度的百分之一，如果一个设备的宽度为375，（我们就可以把这个宽度设置为100vw,高度为100vh）,里面有一个div，高度为37.5px，宽为75px那我们就可以把他的高度写为 10vh，宽度为20vw；

神奇的地方来了：此时当我们的设备发生变化了，div的大小也会随之改变。假如设备的宽度增加到原来的两倍 750px，那么这div的实际宽度就是 75px [ 控制台还是会显示20vw ]。高度亦是如此发生变化，相对视口。

rem：以rem为长度值或者font-size值的单位，那么这个使用rem单位的元素的实际大小[控制台还是会显示原来的值，如下面的16rem ]会随着html的font-size的变化而发生等比例的变化，而不是 css中的类似 2rem 中 2 发生变化；

具体请看下面：

var default_fontSize = 1; //需要传入的默认字体大小
var ref_width = 375; //需要传入的参考window分辨率

!(function(doc, win) {
  var docEle = doc.documentElement,
    evt = "onorientationchsnge" in window ? "orientationchange" : "resize",
    fn = function() {
      var width = docEle.clientWidth;
      width &&
        (docEle.style.fontSize = default_fontSize * (width / ref_width) + "px");
    };
  win.addEventListener(evt, fn, false);
  doc.addEventListener("DOMContentLoaded", fn, false);
})(document, window);

h1标签的 font-sze:16rem
第一张图为iphone6,第二张为iphone5,前后的切换，16rem没有发生变化，但是它具体的值已经发生变化【16px--->13.6533px】