1、固定布局
固定布局是第一次做移動端的朋友們最好的選擇方式，思路沿用pc端，上手比較快。裡把viewport加好，然後設想整個網頁的寬度為320px即可。其他地方pc端怎麼布局，這裡類似即可。
缺點也顯而易見，大屏手機顯示網頁比較寬，而固定布局寬度參照永遠是320px，導致左右兩邊會有空白。就像你用27寸顯示器看980px寬度網頁一樣。另乙個方面就是手機橫屏的時候，兩邊空白更寬。
2、流動布局
以前pc端很少用到這種布局，因為我們需求要麼網頁就一種寬度，要麼就兩種寬度，分寬窄屏處理。而手機上不同，大部份手機預設寬度都不一樣，所以流動布局可以很好解決自適應需求。
流動布局重點就是使用百分比來代替傳統px作為單位（當前容器寬度除以父級容器實際寬度）。例如設計稿寬度為640px，上面有乙個導航裡包含四個選單，四周邊距為20px，四個選單等寬，那麼邊距應該為20px/640px=3.125%，每個選單的寬度為100%/4=25%。demo裡還有邊框，所以記得改變盒子模型，加box-sizing:border-box。
優點是無論網頁寬度如何改變，四個選單的寬度永遠一樣，並且等寬。缺點是不夠靈活，如果選單數量有變化，就滿足不了了。
3、浮動布局
4、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布局
實現三欄布局的六種方式
本文 六種布局方式 聖杯布局 雙飛翼布局 flex布局 絕對定位布局 布局 網格布局 一.聖杯布局 聖杯布局是指布局從上到下分為header container footer，然後container部分定為三欄布局。基礎html 1 body 2 div class container 34 div...
搞定css三欄布局（六種方法）
談到布局，首先就要想到定位，當別人問我，css的position定位有哪些取值，分別表示什麼意思？呃.抓頭.gif，是時候回歸本質，看定義了。1.1 position position有六個屬性值 static relative absolute fixed sticky和inherit。三列布局，...
關於rem布局
我們知道，當使用rem布局，並配合js動態按照比例設定html標籤上的rem值時，整個頁面是按照螢幕的寬度來整體縮放的。對於高度不限制的頁面 也就是超出一屏頁面可以滾動 這種方案沒有任何問題，簡單暴力。但是對於一些需要布滿一整屏的頁面 比如現在流行的上下 左右滑動的那種 由於乙個頁面的元素必須在乙個...