固定布局
為網頁設置一個固定的寬度，通常以px做為長度單位，常見於PC端網頁。
這種布局具有很強的穩定性與可控性，也沒有兼容性問題，但不能根據用戶的屏幕尺寸做出不同的表現。即如果用戶的屏幕分辨率小於這個寬度就會出現滾動條，如果大於這個寬度則會留下空白。
流式布局（Liquid Layout）
為網頁設置一個相對的寬度，頁面元素的大小按照屏幕分辨率進行適配調整，但整體布局不變，通常以百分比做為長度單位（通常搭配 min-*、max-* 屬性控制尺寸流動范圍以免過大或者過小導致元素無法正常顯示），高度大都是用px來固定住。流式布局的代表作柵格系統（網格系統）。
例如設置網頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設定為圖片本身的尺寸，防止被拉伸而失真）。
缺點：因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣，顯示非常不協調
柵格化布局
將網頁寬度人為的划分成均等的長度，然后排版布局時則以這些均等的長度做為度量單位，通常利用百分比做為長度單位來划分成均等的長度。
比如像 bootstrap，foundation 這些框架采用的就是柵格系統，只要給頁面元素添加其柵格系統指定的類名，就能達到想要的響應式布局效果。
bootstrap 的柵格系統是通過一系列的行和列的組合來創建頁面布局，它的柵格系統最大分為12份:
不過 版本bootstrap3 與 bootstrap4 實現柵格系統方式不一樣, bootstrap3 為了兼容 IE，采用的是浮動方式來實現柵格系統：
即每一個柵格都是用左浮動和百分比來進行排版，當窗口寬度改變，對應改變 container 容器的寬度，對應柵格寬度自然也跟着改變：
bootstrap4 放棄了對IE的支持，采用的是最新的伸縮布局方式：
自適應布局（Adaptive Layout）
自適應布局的特點是分別為不同的屏幕分辨率定義布局，即為不同類別的設備創建不同的靜態布局，每個靜態布局對應一個屏幕分辨率范圍。改變屏幕分辨率可以切換調用相應的布局（頁面元素位置發生改變而大小不變），但在每個靜態布局中，頁面元素不隨窗口大小的調整發生變化。可以把自適應布局看作是靜態布局的一個系列。
在這種布局方式下，當視口大小低於設置的最小視口時，界面會出現顯示不全，溢出，並出現滾動條。而且當需求改變時，可能會改動多套代碼。
使用自適應布局時，首先在網頁代碼的頭部，加入一樣 viewport 標簽：
<meta name="viewport" content="width=device-width, initial-scale=1" />
設置網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。然后 CSS 代碼不能使用絕對大小，即不能指定像素 px 寬度，而只能使用相對大小 em 或者 %百分比、rem等。
響應式布局
響應式布局的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、ipad等）都能顯示出令人滿意的效果。通過檢測設備信息，決定網頁布局方式，即用戶如果采用不同的設備訪問同一個網頁，有可能會看到不一樣的展示效果，一般情況下是檢測設備屏幕的寬度來實現。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
應用響應式布局，首先要使用視圖的 meta 標簽來進行重置：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
然后使用 @media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。同自適應布局一樣，在書寫 CSS 樣式時，元素寬度不能使用絕對寬度，而要使用相對大小。
Media Queries 是響應式設計的核心，它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。在優秀的響應范圍設計下可以給適配范圍內的設備最好的體驗，在同一個設備下實際還是固定的布局。但媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。要匹配足夠多的屏幕大小，工作量不小，而且頁面中會出現隱藏元素的操作，這樣代碼就比較冗余，加載時間加長，此外設計也需要多個版本。
自適應布局和響應式布局對比：
不同點：
1.自適應需要開發多套界面；響應式只需開發一套界面。
2. 自適應對頁面的屏幕適配實在一定的范圍，比如：pc 端 > 1024px; 平板 768 ~ 1024px; 手機端 < 768px; 響應式是一套頁面同時兼容在 pc 端、平板和手機端的各個不同視口，而不是為每個終端做一個特定的版本，所以需要考慮的狀態非常多。
相同點：
都是通過檢測視口分辨率，使頁面適應不同分辨率的視口。
彈性布局（rem/em布局）
彈性布局跟流布局很像，網頁寬度不固定，使用 em 或 rem 單位進行相對布局，避免了使用像素 px 布局在高分辨率下幾乎無法辨識的缺點，相對%百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。但彈性布局也有局限性，如果不對這種布局設置一個最小寬度，當用戶縮小窗口到足夠小時會造成布局嚴重錯位。
關於 em / rem / px / % ... 的使用 戳這里
伸縮布局（Flex box）
使用 css3 Flex 系列屬性進行相對布局，用來為盒模型提供最大的靈活性。對於富媒體和復雜排版的支持非常大，但是存在兼容性問題。任何一個容器都可以指定為 flex 布局，行內元素也可以使用。
注意：設為 flex 布局后，子元素的 float、clear、vertical-align 屬性將失效。
注：以上幾種布局方式並不是獨立存在的，實際開發過程中往往是相互結合使用的，根據項目的需求，取各自之所長。