媒體查詢

設計人員可以配合使用者調整設計。 最明顯的例子就是使用者裝置的板型規格、寬度、裝置顯示比例等。設計人員只要使用媒體查詢，就能回應各種板型規格。

媒體查詢是以 @media 關鍵字 (CSS 規則) 啟動，可用於各種用途。

指定不同類型的輸出

網站通常會顯示在畫面上，但 CSS 也能用來設定網站樣式，以便取得其他輸出內容。 你可能想讓網頁在螢幕上呈現某種形式，但列印時則有所不同。 查詢媒體類型就能達到這個目的。

在這個範例中，背景顏色設為灰色。 不過，如果網頁會列印，背景顏色就必須透明。 這項設定會儲存使用者的印表機墨水匣。

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

您可以依照上述方式在樣式表中使用 @media 規則，也可以建立個別的樣式表，並對 link 元素使用 media 屬性：

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

如果您沒有為 CSS 指定任何媒體類型，系統會自動將媒體類型的值設為 all。以下兩個 CSS 區塊相等：

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

這兩行 HTML 也是一樣：

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

查詢條件

您可以為媒體類型新增條件。這就是所謂的媒體查詢。只有在媒體類型相符且條件也為 true 時，系統才會套用 CSS。 這些條件稱為媒體功能。

以下是媒體查詢的語法：

@media type and (feature)

如果您的樣式位於獨立樣式表，則可以對 link 元素使用媒體查詢：

<link rel="stylesheet" href="specific.css" media="type and (feature)">

假設您想根據瀏覽器視窗是處於橫向模式 (可視區域寬度大於高度) 還是直向模式 (可視區域高度大於寬度) 套用不同的樣式。有一個名為 orientation 的媒體功能，可用來測試：

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

或者，如果您偏好使用不同的樣式表：

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

在此案例中，媒體類型為 all。由於這是預設值，因此可視需要省略：

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

或使用個別的樣式表：

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

雖然針對不同媒體「類型」 (例如 print) 使用不同的樣式表是可能的，但我們不建議針對每個媒體查詢使用不同的樣式表。請改用 @media 規則。

根據可視區域大小調整樣式

就回應式設計而言，最實用的媒體功能之一就是瀏覽器可視區域的尺寸。如要在瀏覽器視窗寬度超過特定寬度時套用樣式，請使用 min-width。

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

使用 max-width 媒體功能，即可套用特定寬度以下的樣式：

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

您可以在媒體查詢中使用任何 CSS 長度單位。如果您的內容大多是以圖片為基礎，使用像素會是最適當的做法。 如果您的內容大多以文字為主，最好使用以文字大小為基礎的「相對單位」，例如 em 或 ch：

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

您也可以合併媒體查詢，套用多個條件。使用 and 字詞合併媒體查詢：

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

根據內容選擇中斷點

媒體功能條件變成 true 的時間點稱為中斷點。 建議您根據內容選擇中斷點，而非熱門裝置尺寸，因為它們會隨著每個技術的發布週期而改變。

在這個範例中，50em 是指文字行不舒服的時間點。系統會建立中斷點，讓介面更清晰易讀。使用 column-count 屬性時，文字會從該點開始分割為兩個資料欄。

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

組合

您可以根據可視區域高度 (而不只是寬度) 使用媒體查詢。這對於最佳化「不需捲動位置」的介面內容可能有幫助。在上一個範例中，如果讀者使用的瀏覽器視窗很短，但瀏覽器視窗很短，就必須向下捲動其中一欄，再向上捲動才能移至第二欄頂端。只有在可視區域的寬度和高度都夠高時，才能套用資料欄，這樣比較安全。

您可以合併媒體查詢，讓系統只在符合所有條件時套用樣式。 在這個範例中，可視區域至少要有 50em 寬和 60em 高，才能套用欄樣式。並根據內容量選擇這些中斷點。

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

這些範例說明如何使用媒體查詢，根據使用者裝置的板型規格調整設計，但這些查詢僅止於發掘可能的表面。媒體查詢不只寬度和高度，還能存取使用者對無障礙功能和主題顏色的偏好設定。使用媒體查詢調整版面配置是很好的入門秘訣，您可根據這些功能等條件來建構回應式設計。

隨堂測驗

測驗您對回應式媒體查詢的相關知識。