佈局

按功能區分：

靜態佈局(固定寬度)： 全部尺寸爲固定的尺寸，即寫死尺寸（通常爲px）, 早期有些網站把頁面設置成320的寬度，超出部分留白
　　　　優勢： 操做簡單
　　　　缺點： 不能適配不一樣設備, 還有一個就是大屏幕手機下看起來頁面會特別小，操做的按鈕也很小

inline-block(普通流）佈局: 使用display: inline-block來佈局網站
　　　　優勢： 
　　　　缺點： 

百分比佈局（流式佈局）： 使用百分比作單位
　　　　優勢： 能較好適應不一樣設備， 能夠部分採用寬度100%， 高度auto的處理，達到自適應，好比：輪播圖
　　　　缺點： 添加元素時需更改其餘元素； 在頁面佈局的時候都是經過百分比來定義寬度，可是高度大都是用px來固定住，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度仍是和原來同樣，實際顯示很是的不協調，這就是流式佈局的最致命的缺點

rem佈局： 經過設置html的font-size大小就能夠控制rem的大小，經過改寫html的font-size基準值，來實現不一樣設備之間的適配， 實現自適應有兩個途徑， @media（通常咱們在作web app都會先統計本身網站有哪些主流的屏幕設備，而後去針對那些設備去作media query）和js動態計算（經過一段js根據瀏覽器當前的分辨率改變font-size的值）
　　　　優勢： 只要將rem與屏幕分辨率關聯起來就能夠實現頁面的總體縮放，因此設備上的展示都統一塊兒來了。 好比美工是在640px下設計的頁面，font-size:12px; 而後咱們計算一下再320下面的尺寸就好了, font-size:6px;
　　　　缺點： 若是圖片使用rem定義寬高度，但沒有高清的圖片的話，再大屏幕上會模糊， 還有有一些圖片或div不須要放大，但使用rem的話，默認就會放大， 純js計算的話，由於變更幅度太大，頁面可能會閃爍，最好是結合使用，@media以後，再通過js矯正，元素改變的幅度不太大的話，就不會閃爍

浮動佈局： float + clear
　　　　優勢： 寫法簡單，實現效果起來乾脆利落
　　　　缺點： 對浮動元素要求比較嚴格，佈局也不太靈活

定位佈局： 利用position+四個方位的具體值（top/left/right/bottom）相互配合
　　　　優勢： 彈窗
　　　　缺點： 移動端中頻繁的使用定位，會出現一些莫名的bug;fixed+input在ios上存在bug,會出現使用fixed佈局的元素亂掉。在android手機上當input框獲取焦點時，換氣鍵盤，會出現定位的元素被擡升至手機鍵盤的上方

flex佈局：
　　　　優勢： 自適應很好，靈活性很強，目前在移動端應用的仍是比較普遍
　　　　缺點： 須要寫不少兼容代碼

響應式佈局:  使用@media(媒體查詢)設置頁面在不一樣的屏幕寬度下達到自適應，通常單位爲px， 可使用Chrome調試工具來得到各類手機的屏幕分辨率
　　　　優勢： 不只在不一樣的屏幕下達到自適應，還會在相應的屏幕下對頁面佈局，樣式作出相應的調整，達到更加的用戶體驗
　　　　缺點： 兼容各類設備工做量大，效率低下；代碼累贅，會出現隱藏無用的元素，加載時間過長, 在國內不多有大型企業的複雜性的網站在移動端用這種方法去作，主要緣由是工做大，維護性難, 通常都是中小型的門戶或者博客類站點會採用響應式的方法從web page到web app直接一步到位

viewport: 判斷不一樣的顯示器，按照設計的尺寸進行縮放，好比以320寬度爲基準，進行縮放，到了iPhone6 Plus對應的應該是 initial-scale=414/320 =1.30; <meta name="viewport" content="width=device-width, user-saclable=no, initial-scale=1.3" />
　　　　優勢： 較好適配
　　　　缺點： 這樣作會使得，由於initial-scale愈來愈大，至關於拉伸網頁，而使得在大屏幕的移動端設備下，文字、圖片會變模糊

全屏佈局： 

網格佈局: 

混合佈局： 
　　　　優勢： 佈局靈活，集合其餘佈局的優點達到本身的佈局要求
　　　　缺點： 代碼有點累贅；代碼不統一，維護困難

 

按列數區分：

單列布局

2列布局

3列布局：
　　聖盃佈局: 
　　雙飛翼佈局： 左右寬度固定，中部自適應

多列布局： 

等分佈局： 多列的寬度時一致的

等高佈局： 多列的高度是一致的

 

須要js配合的：

瀑布流佈局： 
　　js計算: 
　　多列: 

 

綜上所述， 我認爲目前最合理的自適應的佈局方式爲: