RWD 是讓同一個網站依螢幕空間調整排版的設計方式。桌機上的三欄卡片，手機可能改為一欄；橫向選單可能收成可展開的按鈕。重點是內容與功能在不同裝置上仍可使用，而非把所有東西等比例縮小。
一份價目表，最能看出差別
假設原本有六欄的價目表，直接縮小後，文字可能小到必須放大才能讀。如果改成卡片，則要確保方案名稱與各項費用的對應關係沒有消失。另一個做法是保留表格，讓表格區域可橫向捲動，並清楚提示仍有其他欄位。
沒有哪一種排法永遠最好。比較性強的資料適合表格；需要逐一閱讀的方案可能適合卡片。手機版設計是在有限空間中保留判斷能力，不能只是把困難的資料隱藏起來。
RWD 怎麼做到？只需要懂三件事
- 容器有彈性：內容寬度依可用空間變化，不把整頁鎖死在固定尺寸。
- 圖片能調整：縮放或裁切時保留重要主體，也避免下載超過需要的大圖。
- 在需要時換排法：當內容擠不下，才切換欄數、間距或選單形式，這些切換點稱為斷點。
斷點不必完全對應某款手機。裝置種類、視窗尺寸與文字大小都會改變，應以內容是否還好讀為依據。即使桌機使用者，也可能把視窗縮成一半來對照其他資料。
手機測試，請加入這些動作
| 動作 | 可以發現什麼 |
|---|---|
| 直向、橫向切換 | 固定高度與版面重排問題 |
| 放大文字 | 標題截斷、按鈕文字被遮住 |
| 開啟表單鍵盤 | 送出鍵被遮擋、捲動位置錯誤 |
| 不使用滑鼠懸停 | 必須 hover 才看得到的資訊 |
| 使用鍵盤移動焦點 | 選單與彈出視窗的操作障礙 |
為什麼有 RWD，網站仍然很慢？
RWD 解決的是排版適應。若手機仍下載大型桌機圖片、背景影片與大量程式，即使畫面不跑版，也可能等很久。效能還需處理圖片尺寸、載入順序及第三方工具。測試時可以離開辦公室 Wi-Fi，用一般行動網路比較。
也別把桌機內容大幅刪減，認為手機使用者不需要詳細資料。有人就是只用手機做完整的採購研究。可把長內容分段或使用清楚目錄，讓重要資訊仍可取得。
不必把所有內容都改成卡片
手機空間小，卡片能分段閱讀，但比較多個方案時，逐張卡片來回翻可能更難記住差異。若讀者任務是橫向比較，保留局部可捲動表格可能更合適，並讓區域可用鍵盤操作。
相反地，沒有比較需求的公司沿革若硬塞進寬表格，就增加不必要的橫向操作。驗收時先說明讀者要做什麼，再決定容器，而不是把某種排法視為手機版唯一答案。
交付時看真實頁面，而不是只有裝置模型圖
設計師提供手機外框中的截圖，可以展示風格，但無法證明選單、輸入欄位與長內容正常。至少選首頁、最長的服務頁、資料表格及表單各測一遍，並記錄問題發生的寬度與操作方式。
技術概念可參考 MDN：Responsive design。