一個網站，多種螢幕。響應式設計使單一佈局能夠適應不同的設備尺寸和方向。這個術語由 Ethan Marcotte 於 2010 年提出，其靈感源自於早期關於靈活網格和串流影像的概念。設計師無需為桌面和行動裝置分別建立網站，而是建立一套程式碼庫，使其能夠根據視口寬度自動調整佈局。

三個技術要素使其得以實現。流式網格使用百分比而非固定像素，因此列會伸縮。柔性影像會根據容器大小進行縮放。媒體查詢會偵測螢幕尺寸，並在定義的斷點套用不同的 CSS 規則。例如，桌面端的三列佈局在手機端可能會折疊成單列，導覽列也會變成漢堡選單。其目標並非像素級的精確控制，而是優雅的自適應。

核心技術

• 基於百分比的流體網格。
• 靈活的影像和媒體。
• 在指定斷點處進行媒體查詢。
• 行動優先的內容策略。

響應式設計如今已成為標準做法。使用者希望無論在手機、平板電腦、筆記型電腦或電視上開啟網站，都能正常使用。