在製作 RWD 響應式網頁時，整體版面規劃可先參考 RWD 新手教學- 從入門到實務一篇搞定；而在實際撰寫 CSS 程式碼時，則是透過 CSS Media Query 用法（
@media媒體查詢）來偵測使用者的螢幕寬度與裝置特性，動態切換桌機版與手機版樣式。
一、 Media Query 語法結構與白話圖解
一條完整的 @media 語法結構主要分為 3 個部分：
- Media Type（媒體類型）：指定要套用在螢幕（
screen）、列印（print）或全部裝置（all，預設值）。 - Media Feature（媒體特徵條件）：寫在括號
()內，例如螢幕最小寬度(min-width: 768px)。 - CSS 樣式規則：當符合上述條件時才生效的 CSS 屬性。
為了方便新手直觀理解，我們將 Media Query 語法結構做成白話對照圖（可點擊圖片放大檢視）：
二、 常用 Media Feature 條件參數對照表
在實務切版中，多數場景都是使用 min-width 與 max-width 來控制 RWD 斷點（Breakpoint），以下整理最常用的條件參數：
| Media Feature 條件參數 | 觸發時機說明 | 現代 Media Queries Level 4 等價寫法 |
|---|---|---|
min-width: 1024px | 當視窗寬度 大於或等於（>=） 1024px 時套用（手機優先 Mobile-First 常用） | (width >= 1024px) |
max-width: 767.98px | 當視窗寬度 小於或等於（<=） 767.98px 時套用（桌機優先 Desktop-First 常用） | (width <= 767.98px) |
min-height / max-height | 當視窗高度大於等於 / 小於等於指定像素時套用 | (height >= 600px) |
orientation: portrait | 當裝置處於 直向（高度 >= 寬度） 時套用；橫向則為 landscape | — |
三、 4 種常見 CSS Media Query 實用範例
1. 基本單一條件：min-width（大於等於）與 max-width（小於等於）
/* 範例 A：當螢幕寬度 >= 1024px（桌機版）時套用 */
@media screen and (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
/* 範例 B：當螢幕寬度 <= 767.98px（手機版）時套用 */
@media screen and (max-width: 767.98px) {
.sidebar {
display: none;
}
}2. 設定寬度區間：使用 and 同時夾擊最小與最大寬度
如果希望某段樣式「只在平板尺寸（例如 768px 到 1023.98px 之間）生效」，桌機跟手機都不套用，可以使用 and 串接兩個條件：
/* 傳統語法：當寬度介於 768px ~ 1023.98px 時套用 */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 現代 Media Queries Level 4 區間語法（Chrome 104、Firefox 102、Safari 16.4 起支援）： */
@media screen and (768px <= width < 1024px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}3. 偵測裝置是否支援滑鼠懸停：@media (hover: hover)
在手機觸控螢幕上，若按鈕寫了 :hover 變色或微浮起效果，使用者手指點一下移開後，依瀏覽器不同，:hover 狀態可能會一直卡在按鈕上，直到點了其他元素才消失。透過 @media (hover: hover) 可以確保只有在真正有滑鼠游標的電腦上才啟用懸停效果：
@media (hover: hover) and (pointer: fine) {
.btn:hover {
transform: translateY(-2px);
}
}4. 偵測系統深色模式：@media (prefers-color-scheme: dark)
配合 CSS 變數（Custom Properties），可根據使用者作業系統的淺色／深色設定自動切換背景與文字顏色：
:root {
--bg-color: #ffffff;
--text-color: #0f172a;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #0f172a;
--text-color: #f8fafc;
}
}四、 常見問題與排錯 Q&A
Q1：為什麼我寫了 @media (max-width: 768px)，但在 Chrome 切換手機模擬器卻完全沒變？
- 問題原因：有兩個最常見原因：第一是 HTML 的
<head>裡面忘了加<meta name="viewport" content="width=device-width, initial-scale=1.0">，導致手機瀏覽器改用比螢幕寬的虛擬 viewport（例如980px）渲染再縮小顯示；第二是@media寫在一般樣式的上面，因為@media本身不會增加 CSS 權重，寫在上面就會被下面的預設樣式蓋掉！ - 解決思路：確認
<head>有加上viewport標籤，並將@media區塊永遠放在一般預設樣式的下方。
Q2：@media screen and (min-width: 768px) 裡面的 and 前後一定要加空白嗎？
- 問題原因：是的！如果把
and(黏在一起寫成and(min-width: 768px)（中間沒有空白），CSS 解析器會將and(誤認為未知的函式名稱，導致整條 Media Query 語法失效。 - 解決思路：
and、not、or關鍵字與後面的(之間請務必保留至少一個半形空白。
發佈留言