【心得总结】手机弹性布局做法--如何做到所有手机所有元素等比缩放

一、目前手机端做法有三种
    
    1、流式布局
    2、固定宽度
    3、响应式


二、简单介绍各种布局
   1、流式布局  宽度百分比，高度固定值PX
   2、固定宽度  网站页面以320写，超出部分留白
   3、响应式    以320为基准，进行缩放，最大缩放为320*1.3 = 416，
      基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。
      <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

三、响应式rem
   1、根元素html字体大小设置为100px,或者625%，
      网上很多说10px或者62.5%但是这个在谷歌下面有个问题，谷歌不支持小于12px的字体，所以会以12px解析
   2、所有宽高字体padding,margin都用单位rem，以量到的具体PX值除以100换成rem单位
   3、以JS检测屏幕大小然后改变字体大小同时改变了所有高宽padding,margin值做到了等比缩放。


四、rem能等比例适配所有屏幕的JS，最大放大两倍

<script>
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if(clientWidth > 640){
            clientWidth = 640;
          }
          if(100 * (clientWidth / 320) > 200){
            var f = 200;
          }
          else
            var f = 100 * (clientWidth / 320);
          document.body.style.width = clientWidth+"px";
          docEl.style.fontSize = f + 'px';
        };

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>