CSS 排版詞條 3-25

媒體查詢Media Query

也常叫做：媒體查詢、響應式設定、Media Query

你可能會這樣說

網站桌機好看，手機上字太小、卡片擠成一團，想要不同寬度自動換版型，又不知道從哪裡下手。

媒體查詢是「螢幕寬度到多少，就換一套樣式」的規則。它讓同一份網站在手機、平板、桌機各自呈現，這整套行為就叫響應式設計。

常見斷點：640px 以下手機、1024px 以下平板，光這兩條就能解決大部分狀況。實作慣例是「手機先寫、逐步加寬」，因為小螢幕的版本通常最單純。

你不需要自己寫規則，跟 AI 說「1024 以下改單欄、選單收漢堡」這種條件句就好。

斷點規則生效：導覽收成漢堡、卡片單欄直排、按鈕滿寬。
寫法：@media (max-width: 480px) { … }

預設樣式：三欄卡片、完整導覽列。
媒體查詢就是「在某個條件下，改用另一套樣式」的開關。

媒體查詢不是重做一個網站，是同一套內容的第二套規則。

圖 3-25　點分頁切換內容。

中文就可以

請幫這頁加上響應式規則：
以手機版為基準先做好，再往上適配平板與桌機。
1024px 以下：三欄卡片變一欄、側欄收進漢堡選單。
640px 以下：內文不小於 16px、按鈕全寬、區塊間距縮小。
分別用 375、768、1280px 寬度截圖給我確認。