H5开发移动端页面自适应的方法!!

在前端开发中总是避免不了做移动端的页面适配，现在记录一下我在做移动端开发时用的方法，希望能帮到你们！
我们首先想到的就是使用百分比或者是尺寸单位换算，加上媒体查询去做，这些我都试过之后觉得还是做不到完全的去适配，后来找到一个利用js去做页面尺寸换算的方法，加上百分比可能适应所有页面。

/*以下代码为不同屏幕下字体通过rem适配设计稿的方案
    @designWidth 设计稿的全屏宽度
    @maxWidth  适配的最大宽度
  */
 (function(designWidth, maxWidth) {
    var doc = document,
     win = window;
   var docEl = doc.documentElement;
   var remStyle = document.createElement("style");
   //获取基准字体大小
   function refreshRem() {
     // var width = parseInt(window.screen.width); // uc有bug
     var width = docEl.getBoundingClientRect().width;
     if (!maxWidth) {
       maxWidth = 750;
     };
     if (width > maxWidth) {
       width = maxWidth;
     }
     var rem = width/designWidth*100;
     //得到的rem基准字体大小，这里乘以100是为了适配有的浏览器不识别小数，会导致设置字体无效。
     //设置根元素html的字体大小为基准字体大小，在css中每rem就是这个值的大小。
     remStyle.innerHTML = 'html{font-size:' + rem + 'px;} ';
   }
   refreshRem();
   if (docEl.firstElementChild) {
     docEl.firstElementChild.appendChild(remStyle);
   } else {
     var wrap = doc.createElement("div");
     wrap.appendChild(remStyle);
     doc.write(wrap.innerHTML);
     wrap = null;
   }
  /* 以下为在不同的时机重新计算rem*/
   win.addEventListener("resize", function() {
     // clearTimeout(tid); //防止执行两次
     // tid = setTimeout(refreshRem, 50);
      refreshRem()
   }, false);

   win.addEventListener("pageshow", function(e) {
     if (e.persisted) { // 浏览器后退的时候重新计算
       refreshRem()
       // clearTimeout(tid);
       // tid = setTimeout(refreshRem,50);
     }
   }, false);
 })(750, 750);

在css中的比例是1rem == 100px