前言

當你已經熟練基本的 min-width、max-width 斷點設計後，其實 CSS 媒體查詢還有更多進階玩法！本章將帶你認識更靈活的媒體查詢條件，讓你的網站能因應更多不同裝置、情境與使用需求。

---

媒體查詢的多元條件

1. 裝置方向（orientation）

你可以根據螢幕是橫向還是直向，切換不同的版型。例如手機橫持時顯示不同內容。

@media (orientation: landscape) {
 /* 橫向時的樣式 */
 .main-content {
   flex-direction: row;
 }
}
@media (orientation: portrait) {
 /* 直向時的樣式 */
 .main-content {
   flex-direction: column;
 }
}

2. 螢幕解析度（resolution）

針對 Retina 或高 DPI 裝置，提供更細緻的圖片或樣式。

@media (min-resolution: 2dppx) {
 .logo {
   background-image: url('logo@2x.png');
 }
}

3. 色彩模式（prefers-color-scheme）

自動偵測使用者是用亮色模式還是暗色模式，切換不同配色。

@media (prefers-color-scheme: dark) {
 body {
   background: #222;
   color: #eee;
 }
}
@media (prefers-color-scheme: light) {
 body {
   background: #fff;
   color: #222;
 }
}

4. 動畫簡化支援（prefers-reduced-motion）

照顧需要簡化動畫的使用者。

@media (prefers-reduced-motion: reduce) {
 * {
   transition: none !important;
   animation: none !important;
 }
}

---

組合多個條件

媒體查詢可以用 and、,（逗號）組合多個條件，做出更精細的控制。例如只在手機直式時生效，或同時根據解析度與方向調整樣式。

@media (max-width: 600px) and (orientation: portrait) {
 /* 只在手機直式時生效 */
 .sidebar {
   display: none;
 }
}

---

更多進階應用範例

1. 高解析度手機顯示更細緻圖示

@media (max-width: 600px) and (min-resolution: 2dppx) {
 .icon {
   background-image: url('icon@2x.png');
   background-size: 24px 24px;
 }
}

2.根據使用者偏好自動切換主題色（搭配 CSS 變數）

:root {
 --main-color: #0080ff;
}
@media (prefers-color-scheme: dark) {
 :root {
   --main-color: #00e0ff;
 }
}
body {ddddd
 background: var(--main-color);
}

3. 面向大型桌機顯示多/欄排版

@media (min-width: 1440px) {
 .container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px;
 }
}

4. 針對觸控裝置調整按鈕大小

@media (pointer: coarse) {
 .btn {
   padding: 18px 32px;
   font-size: 1.2em;
 }
}

這些技巧可以讓你的網站在各種裝置、偏好與環境下都能展現最佳效果。

---

結論

進階媒體查詢能讓你的 RWD 網站更貼近現實使用情境，照顧到更多不同需求的用戶。 只要多加練習、善用線上工具，你就能打造出更聰明、彈性更高的響應式網站！