Ethan Marcotte 提出「響應式設計」：流體網格 + 彈性佈局 + Media Queries，讓單一代碼庫適配從手機到巨型桌面的所有屏幕。Luke Wroblewski 倡導「Mobile First」——從最小屏幕切入，層層增強。本文彙總業界公認的 10 大落地最佳實踐。

10 大響應式設計鐵律

1. Media Queries 必用，但非充分條件：僅有斷點無流體佈局 ≠ 真響應式。
2. 流體佈局拒絕設備特化：不要只適配 iPhone/iPad/Desktop，佈局需連續適應任意寬度，應對未來新設備。
3. 網格系統按內容定制：現成框架（Bootstrap 等）未必貼合業務內容，優先按內容設計佈局。
4. Mobile First 開發流：單列窄屏起步 → 浮動元素加 Media Queries 逐步擴大 → 桌面端最後處理。
5. 舊瀏覽器兼容工具鏈：引入 Respond.js 或 CSS3-Media-Queries-js，確保 IE8- 也能解析 Media Queries。
6. 在瀏覽器而非 PS 中構建組件：動態佈局無法在靜態設計稿驗證，直接在 DevTools 中調試。
7. 圖片自適應：img { max-width: 100%; } 基礎上，大圖用 Responsive Images 技術：小屏載小圖，大屏 JS 換大圖，節省流量。
8. 非關鍵資源延遲加載：輔助元素（推薦模塊、社交按鈕）主內容載入後再 JS 異步注入。
9. 拒絕完美主義陷阱：極少數無 JS 舊瀏覽器看到移動版佈局不算事故，可用性優先。
10. 保持學習心態：響應式設計仍在快速演進，今日最佳實踐明天可能過時，持續跟進社區新技術（Container Queries、CSS Grid、Subgrid 等）。

來源：byane 原文，webapptrend.com 譯文