在第一週的尾聲，我們成功刻出了一張漂亮的個人名片卡片。但如果這時候把瀏覽器視窗拉窄，或是拿手機打開來看，會不會發現排版變得擠成一團、甚至慘不忍睹呢？

現代人瀏覽網頁的裝置千奇百怪，從大螢幕桌機、筆電到平版跟手機，網頁絕對不能「一種尺寸走天下」。

今天我們就來聊聊設計師轉前端必懂的核心——RWD（Responsive Web Design，響應式網頁設計）與它的幕後大功臣 Media Query（媒體查詢）！

什麼是 RWD？網頁界的「自動變形金剛」

過去在做網頁時，常常要另外寫一個手機版網站（例如 m.website.com）。但 RWD 的概念是：同一個網頁、同一份 HTML 骨架，隨著瀏覽器畫面的大小改變，自動調整排版與樣式！

這就跟我們在 Figma 裡利用 Constraints（約束條件）或是 Auto Layout 做出能隨著外框拉伸而自動調整的元件，概念簡直不謀而合。

怎麼用 Media Query（媒體查詢）「聽診」螢幕大小？

要在 CSS 裡實現 RWD，最常用的工具就是 Media Query。它的白話文意思是：「如果螢幕的寬度符合某個條件，就套用這組新的 CSS 樣式！」

/* 預設是電腦大螢幕的樣式 */
.profile-card {
    width: 500px;
}

/* 當螢幕寬度小於或等於 768px（通常是平板或手機尺寸）時觸發 */
@media screen and (max-width: 768px) {
    .profile-card {
        width: 90%; /* 讓卡片寬度佔滿手機畫面兩側留白 */
        padding: 16px;
    }
}

1. @media screen:告訴瀏覽器這是一條針對螢幕裝置的規則
2. (max-width: 768px):設定條件——「當螢幕寬度最大到 768px 時（也就是小於等於這個尺寸）」
3. 大括號裡的 CSS：在這個條件成立的瞬間，覆蓋原本的樣式

設計師轉前端的 RWD 思考習慣

以前在 Figma 設計時，我們習慣從「Desktop（電腦版）」往下縮，或者為不同裝置畫好幾個 Artboard。
但在寫 RWD 程式碼時，多數前端工程師會採取 Mobile First（行動優先） 的策略：

• 先把最窄的手機版版型寫好
• 再透過 Media Query 逐步加上在大螢幕上才要顯示的寬版樣式
  這樣不僅程式碼比較乾淨，也能確保使用者在手機上瀏覽時不會載入一堆用不到的大型樣式

今日小結

今天我們解鎖了讓網頁「伸縮自如」的超能力——Media Query，知道了怎麼針對不同螢幕尺寸調整排版。

學會了 RWD 讓網頁變大變小之後，明天我們要來介紹網頁上那些「絕對定位、相對定位」的小心思（Position 屬性），看看那些浮在畫面上的按鈕是怎麼固定住的！