什麼是 RWD？

RWD 是 「響應式網頁設計」（Responsive Web Design）的縮寫，指的是讓同一個網站可以在不同裝置上自動調整排版和樣式。不管使用者是用手機、平板還是桌機打開網頁，畫面看起來都會是舒服、合適的。

以前我們可能會針對手機版、桌面版做兩套不同的網站，但 RWD 的出現讓我們只需要寫一套程式碼，透過 CSS 來自動調整樣式，節省開發時間也更容易維護。

RWD 怎麼做到的？

最關鍵的技術是：Media Query（媒體查詢）

你可以針對不同的螢幕寬度，設定不同的樣式。例如：

css
/* 手機樣式 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

/* 桌面樣式 */
@media (min-width: 769px) {
  .container {
    flex-direction: row;
  }
}

這段 CSS 就是當畫面寬度小於 768px（例如手機）時，把 .container 裡的內容變成垂直排列；當畫面大於 769px（例如桌機）時，則改為橫向排列。

小結

在這個手機使用率超過桌機的時代，RWD 不只是加分項，而是每個網站的基本要求。透過簡單的技巧與結構規劃，你就能打造一個在各種螢幕上都表現良好的網頁，讓使用者愛不釋手！