一、首先看下固定布局與流體布局的區別

（一）固定布局

固定布局的網頁有一個固定寬度的容器，內部組件寬度可以是固定像素值或百分比。其容器元素不會移動，無論訪客屏幕分辨率如何，看到的網頁寬度都相同。現代網頁設計中，960 像素寬度較為常見，因為多數用戶屏幕分辨率在 1024x768 及以上。

（二）流體布局

流體布局（又稱液態布局）中，多數組件寬度使用百分比設置，會根據用戶屏幕分辨率自動調整。雖然部分設計師可能會為某些元素（如邊距）設置固定寬度，但整體布局以百分比寬度為主。

二、固定網頁設計

（一）優點

1. 易于使用和定制設計。
2. 各瀏覽器寬度一致，處理固定寬度的圖像、表單、視頻等內容更方便。
3. 無需考慮 min-width 和 max-width 屬性（部分瀏覽器不支持）。
4. 即使為最小屏幕分辨率（800x600）設計，在高分辨率下內容也足夠清晰可讀。

（二）缺點

1. 對于高分辨率用戶，可能產生過多空白，破壞設計原則。
2. 小分辨率屏幕可能需要水平滾動條。
3. 需使用無縫紋理、圖案和圖像來適應高分辨率。
4. 可用性評分通常較低。

（三）應對固定布局缺點的技巧

1. 參考統計數據：多數設計師認為多數用戶屏幕分辨率在 1024x768 及以上，但實際情況并非完全如此。雖不同統計來源數據有差異，但 800x600 分辨率用戶占比相對較小。多數設計師選擇 960 像素（適合 1024x768 及更高分辨率）或 760 像素（兼顧 800x600 分辨率和大屏幕）的固定寬度。
2. 居中布局：使用固定寬度設計時，將容器 div 居中（如使用margin: 0 auto;），以保持頁面平衡，避免在高分辨率屏幕下布局偏居一角。

三、流體網頁設計

（一）優點

1. 更用戶友好，能適應用戶設備設置。
2. 各瀏覽器和屏幕分辨率下的額外空白量相似，視覺效果更好。
3. 設計良好時，可消除小分辨率屏幕的水平滾動條。

（二）缺點

1. 設計師對用戶看到的內容控制較少，可能因自身屏幕分辨率忽略問題。
2. 固定寬度的圖像、視頻等內容可能需要設置多種寬度以適應不同分辨率。
3. 高分辨率下，內容不足可能產生過多空白，影響美觀。

（三）解決方案：優化流體布局的方法

1. 采用簡潔設計：減少對圖形和復雜技術的依賴，使代碼和設計更簡潔，便于創建、維護，且能更好兼容不同分辨率。
2. 使用 min-width 和 max-width 屬性：可在用戶屏幕過小或過大時創建固定寬度，讓布局像固定布局一樣顯示滾動條。但多數 IE 瀏覽器不支持，可通過 IE 特定表達式解決。

四、彈性盒子

彈性設計使用 em 作為單位設置所有元素大小。em 是基于字體大小的相對單位，能響應用戶文本大小偏好。

（一）優點

1. 若實現得當，非常用戶友好，元素可按用戶偏好等比例縮放。
2. 融合了固定和流體布局的優點，適合喜歡這兩種布局的設計師。

（二）缺點

1. 可用性方面可能存在大問題，需要大量技巧和測試才能適用于所有用戶。
2. 比其他兩種布局更難創建，其帶來的額外可用性可能并不值得。
3. 部分彈性設計可能需要針對 IE6 的補充樣式表和技巧。

（三）補充

彈性布局和流體布局外觀相似，但彈性布局主要依賴字體大小用 em 設置，會根據用戶瀏覽器設置的文本大小調整。

五、如何選擇適合的布局

選擇固定或流體布局取決于網站類型。作品集網站通常更適合固定布局，便于設計師控制設計和處理圖像。追求 100% 兼容性的設計師可選擇流體布局，盡管要應對小部分低分辨率用戶，但對于受眾廣泛的網站，簡單干凈的流體布局能有效滿足需求。若難以抉擇，彈性或部分彈性設計也是不錯的選擇，可結合rem、百分比和像素寬度設置布局元素。