先在手機上打開一個網站，然後在筆記型電腦上打開，最後在電視上打開。如果在這三個裝置上看起來都很正常，無需瞇眼或縮放，那麼這個網站就是採用響應式設計。這種方法允許同一套程式碼庫根據不同的螢幕尺寸自動調整佈局、圖片和字體。

2010年，行動瀏覽呈現爆炸性成長，設計師面臨一個選擇：為每種裝置建立單獨的網站，還是建立一個能夠適應不同裝置的網站。 Ethan Marcotte 創造了「響應式設計」這個術語。最終，響應式設計勝出。其核心工具包括串流網格、彈性圖像和媒體查詢。媒體查詢會詢問瀏覽器視窗的寬度，並根據瀏覽器的答案套用不同的 CSS 規則。

是什麼讓設計具有響應式？

• 使用百分比而非固定像素的動態網格
• 可靈活縮放的影像，可在容器內擴展
• 媒體查詢可針對不同的螢幕尺寸套用斷點
• 行動佈局上的觸控友善目標

目標不僅是將內容適配到小螢幕上，而是確保在任何情況下都能保持可讀性、層級性和易用性。桌面端的三欄佈局在手機上可能會變成單欄，漢堡選單可以取代完整的導覽列。優秀的響應式設計讓人感覺渾然天成，彷彿網站原本就應該在你的裝置上呈現出這種效果。