六种布局+rem布局
1、固定布局
固定布局是第一次做移动端的朋友们最好的选择方式，思路沿用PC端，上手比较快。<head>里把viewport加好，然后设想整个网页的宽度为320px即可。其他地方PC端怎么布局，这里类似即可。
缺点也显而易见，大屏手机显示网页比较宽，而固定布局宽度参照永远是320px，导致左右两边会有空白。就像你用27寸显示器看980px宽度网页一样。另一个方面就是手机横屏的时候，两边空白更宽。
2、流动布局
以前PC端很少用到这种布局，因为我们需求要么网页就一种宽度，要么就两种宽度，分宽窄屏处理。而手机上不同，大部份手机默认宽度都不一样，所以流动布局可以很好解决自适应需求。
流动布局重点就是使用百分比来代替传统px作为单位（当前容器宽度除以父级容器实际宽度）。例如设计稿宽度为640px，上面有一个导航里包含四个菜单，四周边距为20px，四个菜单等宽，那么边距应该为20px/640px=3.125%，每个菜单的宽度为100%/4=25%。DEMO里还有边框，所以记得改变盒子模型，加box-sizing:border-box。
优点是无论网页宽度如何改变，四个菜单的宽度永远一样，并且等宽。缺点是不够灵活，如果菜单数量有变化，就满足不了了。
3、浮动布局
很多乐观的人，看到Flexbox最新一版的规范，满心欢喜的觉得移动端可以不用浮动布局了。但很遗憾，对于Android 2.3支持的Flexbox老规范，连最简单的多行商品按顺序排列，都实现不了。对于这种情况，我喜欢用传统的浮动方式。因为对于开发人员，这种循环是最简单的。再加上:nth-child伪类处理边距，干脆利落。所以，我并没有放弃浮动布局。当然，因为不需要兼容老版本IE了，浮动的写法也变得简单许多。
.clearfix{ content:""; display:table; clear:both;}
我在Less的公共代码库里，也加了这个：
.clearfix(){ &:after{ content:""; display:table; clear:both; }}需要清除浮动，直接写.clearfix()即可。floid app工具
4、Flexbox布局
上一篇入门文章已经提到这货了，不知道你有没有试过，是不是很神奇？现在我大部份布局都是用Flexbox，包括你以前用浮动的情况，大部份也可以用Flexbox代替。
例如上面流动布局用百分比做的宽，局限性就是无法增加删除菜单，改变菜单数量。如果改为用Flexbox布局，这个问题迎刃而解，不论菜单有多少个，都自动等宽排列成一行。
再说两点：
Flexbox有好几版，所以会导致不兼容的情况，特别是Android 2.3。做了个小工具→Flexbox生成工具←。暂时只做了最简单的几种情况，但都兼容iOS 5+、Android 2.3+、Windows Phone 8+，满足日常需求没问题。
在Flexbox里，margin很神奇，所以会导致你频繁用margin:auto;。如果你养成了这个坏习惯，老iOS和老Android里会死得很惨。建议用Flexbox工具里的技术属性，来处理居中情况。
5、混合布局
把所有学到的知识，灵活运用在布局中，我称之为混合布局。
例如我上面DEMO里的混合布局示例，设计稿宽度640px，边距20px，左侧大图宽高390px，右侧小图宽高190px。首先外层容器Flexbox，让里面左右结构显示。容器640px去掉左右边距40px剩600px，左侧390px/600px=65%，右侧190px/600px=31.66666667%，两者之间边距20px/600px=3.33333333%。右侧里面小图片直接宽度100%，高度跟宽度1：1，最后通过Flexbox让两个图一上一下，完成。三张图片记得用图片自适应，比例1：1。
6、定位布局
定位在移动端也用得挺多，特别是弹窗。
position: fixed;left: 50%;top: 50%;-webkit-transform: translate3d(-50%,-50%,0);transform: translate3d(-50%,-50%,0);
如此简单就搞定水平垂直居中的弹窗。实际使用中，有少数几个手机的浏览器居然不支持translate3d，实在无语。如果非要兼容这些浏览器，推荐使用Flexbox弹窗。扩展一下，移动端建议用硬件加速的属性，相关链接1、链接2，而不是直接用margin。（我测试过transition移动一个div，margin会卡顿）
7、Rem布局
手机页面设计一般的大小是640，但是，手机屏幕大小确实不确定的，这样，怎么才能做出适应所有手机的手机页面呢？
一般的解决方案有两种，rem布局和百分比布局。这两种方案我有都试过，所以现在更推荐用rem布局来制作手机页面;
rem布局的兼容性：
Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 还是别用rem
不过现在的手机一般浏览器，一般可以直接不用去管IE内核的浏览器了。
REM的计算公式
例:html 设置font-size:16px 1rem = 16px
那么640px = 640/16 =40rem
个人建议设置为100px 方便计算
首先，给页面的html定义一个100px的
html{ font-size:100px;}/*设定基础rem*/
且看本人demo