一、目前手机端做法有三种

    

    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>