前幾天我們已經學了網頁的「骨架」、語義化標籤，以及 CSS 的基本用途。今天要來聊一個很重要的概念：RWD（Responsive Web Design，響應式網頁設計），以及它和 CSS 的關係。

RWD 是一種設計網頁的方法，最早由美國設計師 Ethan Marcotte 在 2010 年提出。隨著手機和平板越來越普及，很多網站在小螢幕上無法正常使用，使用者體驗不好。RWD 的目標就是：讓同一個網站能自動調整版面和內容，適應不同的裝置和螢幕尺寸，不需要為手機、平板和電腦各做一個版本。

而版面的自動調整，主要是靠 CSS 技術完成的。透過 CSS，我們可以使用 媒體查詢（Media Query）、彈性圖像、彈性佈局、百分比寬度等方法，讓網頁元素隨螢幕大小自動縮放、排列或隱藏。例如：文字在手機上變小、圖片縮小、欄位改成一列；在桌機上恢復多欄排版。這樣使用者在不同裝置上都能舒服瀏覽，不用左右滑動或放大縮小畫面。

如果沒有 RWD，網站在手機上可能會亂掉：字太小、圖片跑版、按鈕點不到，甚至使用者一打開就關掉網頁。以前的解決方式是手機版網站，但這需要多個版本管理，增加維護成本，且在不同裝置上呈現效果不一致。RWD 出現後，只要一個網站就能應付各種螢幕，維護更方便，也提升使用者體驗。

學習心得
今天我發現，RWD 不只是「版面好看」，更是提升使用者體驗的關鍵。透過 CSS 的媒體查詢和彈性設計，網站能自動適應手機、平板和電腦，操作流暢又整齊。學習了 RWD 後，我覺得做網站更專業了，也更貼近使用者的需求，這也是現代網頁設計不可或缺的一部分。