实现手机端自适应布局的几种方法

1.固定宽度
头部设置
<meta name="viewport" id="viewport" content="width=640,user-scalable=0, target-densitydpi=320">
，意思为根据设计稿的大小（640px），以320(iphone5)为基准进行缩放，此方法简单粗暴高效，在后面的css样式中只需要根据设计稿的实际大小，根据px来写即可，可完美自适应大小不同的屏幕。
这种方法目前见到的缺点有：

1. 缩放会导致有些页面元素会糊的情况。
2. 如果此页面有可能嵌套在别的系统或者页面中，如果上层页面width=device-width就会整个错乱。
3. 在微信中如果需要识别二维码，会识别不出来。
4. （欢迎补充）

---

2，使用rem适配
rem是根据根元素(html)font-size的大小计算出来的
例如设置html{font-size: 10px }那么1rem=10px;
设置html{font-size: 20px }那么1rem=20px;
这样我们只需要改变根元素html的font-size大小缩放页面。
改变根元素font-size大小的方法。
1. 媒体查询
一般我们在做web app都会先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置也可以实现适配。
如下所示

html{
    font-size:12px;
}
@media only screen and (min-width: 371px){
    html {font-size: 14px !important;}
  }
  @media only screen and (min-width: 401px){
      html {font-size: 15px !important;}
  }
  @media only screen and (min-width: 428px){
      html {font-size: 16px !important;}
  }
  @media only screen and (min-width: 481px){
      html {font-size: 16px !important;}
  }
  @media only screen and (min-width: 569px){
      html {font-size: 17px !important;}
  }

如果设计稿宽度为640，那么对应的是html{font-size:12px;}那么设计稿的大小/2/12为你需要的rem的大小。
例如：设计稿btn的宽度为48px，高度为24px,字体大小为24，那么在代码中对应为
.btn{
width: 2rem;
height: 1rem;
font-size: 1rem
}

---

2.使用js控制根元素font-size大小

<script>
      (function (win,doc){
        if (!win.addEventListener) return;
        var html=document.documentElement;
        function setFont()
        {
          var cliWidth=html.clientWidth;
          html.style.fontSize=100*(cliWidth/750)+'px';
        }
        win.addEventListener('resize',setFont,false);
        setFont();
      })(window,document);
    </script>

媒体查询可以实现固定几个屏幕大小的适配，而js可以实现所有的适配。
如引用上面的代码，设计稿大小为750，如果为640 将html.style.fontSize=100*(cliWidth/750)+'px';中750改为640
在这里1rem=50px；
例如在宽度为750的设计稿中btn的宽度为100px，高度为50px,字体大小为30px那么对应的css为
.btn{
width: 1rem;
height: 0.5rem;
font-size: 0.3rem
}
此处以375屏幕（iphone6）为基准，设计稿为实际尺寸的2倍，所以设计稿大小/2/50为你所需要的rem大小。
注：chrome默认最小限制字体为12px。
第一次写博客，如有错误，请指出并多多包涵。