CSS各種佈局

http://www.liquidapsive.com/

1 靜態佈局（Static Layout）
網頁上的全部元素的尺寸一概使用px做爲單位。
特色：無論瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫代碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設置了min-width，這樣的話，若是小於這個寬度就會出現滾動條，若是大於這個寬度則內容居中外加背景，這種設計常見與pc端
優勢：CSS編寫是最簡單的，沒有兼容性問題。
缺點：不能根據用戶的屏幕尺寸作出不一樣的表現。

 

2 流式佈局（Liquid Layout）

特色: 頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變,好比屏幕小的時候，相關元素的寬度也會進行壓縮，顯示的內容可能會出現換行。網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度爲80%，min-width爲960px。圖片也做相似處理（width:100%, max-width通常設定爲圖片自己的尺寸，防止被拉伸而失真）。
設計方法：使用%百分比定義寬度，高度大都是用px來固定住，能夠根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘量的適應各類分辨率。每每配合 max-width/min-width 等屬性控制尺寸流動範圍以避免過大或者太小影響閱讀。
缺點：若是屏幕尺度跨度太大，那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示。由於寬度使用%百分比定義，可是高度和文字大小等大都是用px來固定，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度、文字大小仍是和原來同樣（即，這些東西沒法變得「流式」），顯示很是不協調。

 

3 自適應佈局（Adaptive Layout）
自適應佈局的特色是分別爲不一樣的屏幕分辨率定義佈局，即建立多個靜態佈局，每一個靜態佈局對應一個屏幕分辨率範圍。改變屏幕分辨率能夠切換不一樣的靜態局部（頁面元素位置發生改變），但在每一個靜態佈局中，頁面元素不隨窗口大小的調整發生變化。能夠把自適應佈局看做是靜態佈局的一個系列。
佈局特色：屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化。
設計方法：使用 @media 媒體查詢給不一樣尺寸和介質的設備切換不一樣的樣式。在優秀的響應範圍設計下能夠給適配範圍內的設備最好的體驗，在同一個設備下實際仍是固定的佈局

 

4 響應式佈局（Responsive Layout）
響應式設計的目標是確保一個頁面在全部終端上（各類尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出使人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但一般是糅合了流式佈局+彈性佈局，再搭配媒體查詢技術使用。——分別爲不一樣的屏幕分辨率定義佈局，同時，在每一個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。即：建立多個流體式佈局，分別對應一個屏幕分辨率範圍。能夠把響應式佈局看做是流式佈局和自適應佈局設計理念的融合。響應式幾乎已經成爲優秀頁面佈局的標準。
佈局特色：每一個屏幕分辨率下面會有一個佈局樣式，即元素位置和大小都會變。
設計方法：媒體查詢+流式佈局。一般使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對佈局單位進行佈局，實際上就是綜合響應式、流動等上述技術經過 CSS 給單一網頁不一樣設備返回不一樣樣式的技術統稱。
優勢：適應pc和移動端，若是足夠耐心，效果完美
缺點：（1）媒體查詢是有限的，也就是能夠枚舉出來的，只能適應主流的寬高。（2）要匹配足夠多的屏幕大小，工做量不小，設計也須要多個版本。

 

總結：

響應式與自適應的原理是類似的，都是檢測設備，根據不一樣的設備採用不一樣的css，並且css都是採用的百分比的，而不是固定的寬度，不一樣點是響應式的模板在不一樣的設備上看上去是不同的，會隨着設備的改變而改變展現樣式，而自適應不會，全部的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備採用不一樣的展現樣式，流式就是採用了一些設置，當寬度大於多少時怎麼展現，小於多少時怎麼展現，並且展現的方式向水流同樣，一部分一部分的加載，靜態的就是採用固定寬度的了。

流式佈局是用於解決相似的設備不一樣分辨率之間的兼容(通常分辨率差別較少)；響應式是用於解決不用設備之間不用分辨率之間的兼容問題(通常是指PC，平板，手機等設備之間較大的分辨率差別)。