CSS - 媒體查詢：初學者指南
你好，未來的網頁開發者們！今天，我們將進入CSS媒體查詢的精彩世界。作為你們友善的鄰居計算機老師，我會帶領你們一步一步地走過這段旅程。別擔心你們之前從未編過程——我們會從基礎開始，然後逐步提升。那麼，來一杯咖啡（或者如果你喜歡，來一杯茶），讓我們開始吧！
媒體查詢是什麼？
在我們深入細節之前，讓我們先了解媒體查詢是什麼。想像你正在設計一個在你電腦上看起来很棒的網站。但當有人在他的手機上查看它時會發生什麼？這就是媒體查詢派上用場的地方！它們讓你的網站能夠適應不同的螢幕大小和設備。這就像有一個變色龍網站，它的外觀會根據環境變化。
語法
現在，讓我們看看媒體查詢的基本語法：
@media mediatype and (condition) {
/* CSS規則寫在這裡 */
}別讓這個嚇到你！我們會分解它：
-
@media：這告訴瀏覽器，“嘿，我即將設置一些條件！” -
mediatype：這指定我們正在 targeting 的媒體類型（我們稍後會涵蓋這些）。 -
and：這是我們如何組合條件。 -
(condition)：這是我們設置特定條件的地方。
媒體類型
媒體類型告訴瀏覽器我們正在 targeting 什麼樣的設備。這裡有一些主要的類型：
| 媒體類型 | 描述 |
|---|---|
| all | 適用於所有設備 |
| 為打印機設計 | |
| screen | 為電腦螢幕、平板電腦和手機設計 |
邏輯運算符
我們可以使用邏輯運算符來創建更複雜的查詢：
| 運算符 | 描述 |
|---|---|
| and | 組合多個媒體特性 |
| not | 反轉媒體查詢 |
| only | 只有當整個查詢匹配時才應用樣式 |
| , | 組合多個媒體查詢 |
CSS 媒體類型 - All
all 媒體類型就像瑞士軍刀——它適用於所有設備。這有一個例子：
@media all {
body {
background-color: lightblue;
}
}這會將所有設備的背景顏色設為淺藍色。簡單吧？
CSS 媒體類型 - Print
print 媒體類型當有人想打印你的網頁時，非常適合為你的網頁設計樣式。讓我們看看它是如何工作的：
@media print {
body {
font-size: 12pt;
}
.no-print {
display: none;
}
}這會增加字體大小以改善可讀性，並在打印時隱藏具有 no-print 類的元素。
CSS 媒體類型 - Screen
screen 媒體類型可能是你最常使用的。它適用於任何基於螢幕的設備。這有一個例子：
@media screen and (max-width: 600px) {
.menu {
width: 100%;
}
}這會讓菜單在螢幕寬度為600像素或更小的時候佔滿整個螢幕寬度。
CSS 媒體類型 - 使用逗號
我們可以使用逗號來 targeting 多個媒體類型。這就像邀請多個朋友來參加派對：
@media screen, print {
body {
line-height: 1.5;
}
}這會為螢幕和打印媒體類型設置行高。
CSS 媒體類型 - 使用 Only
only 鍵字就像俱樂部的門衛。它確保不支持媒體查詢的舊版瀏覽器不應用樣式：
@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
}CSS 媒體查詢 - 範圍
我們也可以為我們的條件指定範圍：
@media screen and (min-width: 600px) and (max-width: 900px) {
.sidebar {
display: none;
}
}這會在螢幕寬度在600px和900px之間時隱藏側邊欄。
媒體特性
媒體特性讓我們測試用戶設備或瀏覽器的特定特性。這裡有一些常見的特性：
| 特性 | 描述 |
|---|---|
| width | 觀看區域的寬度 |
| height | 觀看區域的高度 |
| aspect-ratio | 寬度和高度之間的比例 |
| orientation | 景觀或肖像 |
| resolution | 設備的像素密度 |
創建複雜的媒體查詢
讓我們將所有這些組合起來，創造一個更複雜的例子：
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
}這會為寬度在600px和900px之間的橫向屏幕創造一個兩列佈局。
CSS 媒體查詢 - 組合多個類型或特性
我們可以使用 and 運算符來組合多個類型或特性：
@media screen and (min-width: 600px) and (max-width: 900px), print and (max-width: 600px) {
.content {
font-size: 14px;
}
}這會應用樣式到寬度在600px和900px之間的螢幕，或者當打印在600px寬的紙張上時。
CSS 媒體查詢 - 測試多個查詢
有時候，我們希望如果多個查詢中的任何一個為真，則應用樣式。我們使用逗號來實現這一點：
@media (min-width: 600px), (orientation: landscape) {
.header {
position: sticky;
top: 0;
}
}這會使標題在螢幕至少600px寬或橫向時粘性定位。
CSS 媒體查詢 - 反轉查詢的意義
not 鍵字讓我們反轉查詢的意義：
@media not all and (orientation: landscape) {
.sidebar {
float: left;
}
}這會在設備不是橫向時將側邊欄浮動到左邊。
CSS 媒體查詢 - 提高與舊版瀏覽器的兼容性
對於不支持媒體查詢的舊版瀏覽器，我們可以提供 fallback 樣式：
.container {
width: 100%; /* 舊版瀏覽器的fallback */
}
@media screen and (min-width: 600px) {
.container {
width: 80%;
}
}這樣即使在不懂媒體查詢的瀏覽器上也能確保有個不錯的佈局。
這就是你進入響應式網頁設計世界的第一步，CSS媒體查詢。記住，熟能生巧，所以不要害怕嘗試這些概念。開心編程！
Credits: Image by storyset