1 、靜態佈局

即傳統網頁設計模式，只需做一套尺寸的設計稿（比如 1280*800px），一旦裝置解析度寬度小於 1280px，則出現橫向捲軸，一旦裝置解析度寬度大於 1280px，則內容居中顯示，兩邊留白。（常見於新聞類、電商類、政府類網頁），這種佈局方式對設計師和前端而言是 zui 簡單的。

2 、自適應佈局

可以把自適應佈局看作是靜態佈局的一個系列。自適應佈局的特點是為不同的螢幕解析度定義固定佈局，即建立多個靜態佈局。一個靜態佈局對應一個螢幕解析度，改變螢幕解析度可以切換不同的靜態區域性，但頁面元素不隨視窗大小的調整發生變化。簡而言之就是需要自適應幾個終端，就需要出幾套尺寸的設計稿。

3 、彈性佈局

以百分比作為頁面的基本單位，可以適應一定範圍內所有尺寸的裝置螢幕及瀏覽器寬度，並能完美利用有效空間展現 zui 佳效果。

4 、混合式佈局

混合式佈局就是為不同終端裝置的螢幕解析度定義佈局（適配各種尺寸的 PC 、手機、穿戴裝置等等），在每個佈局中，頁面元素隨著視窗調整而自動適配，混合了百分比、畫素為基本單位的組合方式。可以把混合式佈局看作是彈性佈局、自適應佈局的融合。簡而言之就是隻需要一套設計稿適應多個終端。

自適應佈局、彈性佈局、混合佈局都是響應式佈局方式的一種。其中自適應佈局的實現成本 zui 低，但拓展性比較差；而彈性佈局與混合佈局效果都是比較理想的響應式佈局實現方式。很多時候，單一方式的佈局響應無法滿足理想效果，需要結合多種組合方式，但原則上儘可能是保持簡單輕巧，而且同一斷點內（發生佈局改變的臨界點稱之為斷點）保持統一邏輯，否則頁面實現太過複雜也會影響整體體驗和頁面效能。一般通欄、等分結構的佈局適合採用彈性佈局方式，非等分的多欄結構佈局則需要採用混合佈局的實現方式。

我所接觸的網站專案几乎也都是響應式開發，顯然響應式已成為網頁設計的標配，而不是什麼奢侈品。所以，牢牢掌握響應式佈局設計規範也是 ji 為必要的。