CSS 排版詞條 3-16
響應式設計Responsive Design
也常叫做：RWD、自適應設計（技術圈會再細分，口語相通）、Responsive
你可能會這樣說
電腦上看很漂亮，一到手機上全跑版、字超小——這個有救嗎？
白話解釋
響應式設計（RWD）的意思是：同一個網站會自己適應不同大小的螢幕：電腦上三欄並排，平板變兩欄，手機變成直的一欄。不是做三個網站，是同一個網站會「看狀況變形」。
判斷一個網站有沒有做 RWD，最快的方法：在電腦上把瀏覽器視窗拉窄，看版面會不會跟著重排。如果畫面完全不動、右邊出現橫向捲軸、字小得要放大——就是沒做好。
跟 AI 協作時，記得把手機當第一公民講清楚。因為 AI 預設常以電腦版面思考，你不講，它就忘了你的使用者有一半在手機上。說法很簡單：「這個區塊在手機上要直著排、按鈕要滿寬、字級不能小於 16px」。
親手試試
螢幕寬度
620px · 電腦版面
注意：往左拖到 480px 以下，卡片自己排成一直線——這就是「響應式」：同一份內容，版面自己變形。
別搞混
跑版不一定是 RWD 沒做，先分辨你遇到的是哪一種問題。
響應式 RWD
一套網站適應所有螢幕，內容會重排。現代網站的標準做法，維護一份就好。檢查方法：把視窗拉窄看它會不會變。
手機版 App 或獨立手機網站
另外做一套給手機用（不同網址或不同程式）。功能可以差很多，但要維護兩份。一般做網站不需要走到這步。
這樣對 AI 說
中文就可以
請幫我把這個網頁改成響應式（RWD）： 1. 電腦版維持現在的樣子，三欄卡片並排。 2. 平板（768px 以下）變兩欄；手機（480px 以下）變單欄，卡片依序往下排。 3. 手機上的按鈕要變成滿寬、好按（高度至少 44px），正文字級不小於 16px。 4. 全部做完後，請自己檢查一次：手機上不能出現橫向捲軸。 完成後告訴我怎麼測試。
把「斷點」（768px、480px）和具體數字講出來，AI 就不會只給你一句模糊的「已支援手機」。