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
