一、靜態佈局（Static Layout）
即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。

1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見與pc端。
2、設計方法：
　　PC：居中佈局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
　　移動裝置：另外建立移動網站，單獨設計一個佈局，使用不同的域名如wap.或m.。

　（1）在viewport meta標籤上設定width=320，頁面的各個元素也採用px作為單位。通過用JS動態修改標籤的initial-scale使得頁面等比縮放，從而剛好佔滿整個螢幕。

　（2）設在viewport meta標籤上設定content"width=640,user-scalable=no，頁面的各個元素也採用px作為單位。由於640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。（具體見content"width=640,user-scalable=no" 然後再進行固定尺寸的px設計？ - 前端開發）

優點：這種佈局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有相容性問題。

缺點：顯而易見，即不能根據使用者的螢幕尺寸做出不同的表現。

當前，大部分入口網站、大部分企業的PC宣傳站點都採用了這種佈局方式。固定畫素尺寸的網頁是匹配固定畫素尺寸顯示器的最簡單辦法。但這種方法不是一種完全相容未來網頁的製作方法，我們需要一些適應未知裝置的方法。

二、流式佈局（Liquid Layout）

流式佈局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照螢幕解析度進行適配調整，但整體佈局不變。代表作柵欄系統（網格系統）。

網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設定網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。

1、佈局特點：螢幕解析度變化時，頁面裡元素的大小會變化而但佈局不變。【這就導致如果螢幕太大或者太小都會導致元素無法正常顯示】

2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。

這種佈局方式在Web前端開發的早期歷史上，用來應對不同尺寸的PC螢幕（那時螢幕尺寸的差異不會太大），在當今的移動端開發也是常用佈局方式，但缺點明顯：主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。

三、自適應佈局（Adaptive Layout）
自適應佈局的特點是分別為不同的螢幕解析度定義佈局，即建立多個靜態佈局，每個靜態佈局對應一個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性（頁面元素位置發生改變），但在每個靜態佈局中，頁面元素不隨視窗大小的調整發生變化。可以把自適應佈局看作是靜態佈局的一個系列。
1、佈局特點：螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。
2、設計方法：使用 @media 媒體查詢給不同尺寸和介質的裝置切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同一個裝置下實際還是固定的佈局。

四、響應式佈局（Responsive Layout）

隨著CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但通常是糅合了流式佈局+彈性佈局，再搭配媒體查詢技術使用。——分別為不同的螢幕解析度定義佈局，同時，在每個佈局中，應用流式佈局的理念，即頁面元素寬度隨著視窗調整而自動適配。即：建立多個流體式佈局，分別對應一個螢幕解析度範圍。可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合。

響應式幾乎已經成為優秀頁面佈局的標準。

1、佈局特點：每個螢幕解析度下面會有一個佈局樣式，即元素位置和大小都會變。

2、設計方法：媒體查詢+流式佈局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對佈局單位進行佈局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同裝置返回不同樣式的技術統稱。

優點：適應pc和移動端，如果足夠耐心，效果完美

缺點：（1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。（2）要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本。

響應式頁面在頭部會加上這一段程式碼：
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

總結：

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

流式佈局是用於解決類似的裝置不同解析度之間的相容(一般解析度差異較少)；響應式是用於解決不用裝置之間不用解析度之間的相容問題(一般是指PC，平板，手機等裝置之間較大的解析度差異)。

五、彈性佈局（rem/em佈局）