媒體查詢

設計師可以配合使用者調整設計。 最明確的例子就是使用者裝置的板型規格。寬度 以及裝置的長寬比等等設計人員可以透過媒體查詢，回應各種板型規格。

媒體查詢是透過 @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;
  }
}

以下範例顯示如何運用媒體查詢，根據使用者裝置的板型規格調整設計。 但這些只是開創無限可能性的做法媒體查詢範圍可遠超出寬度和高度 存取無障礙功能和主題色彩的使用者偏好設定。 使用媒體查詢調整版面配置，是參考上述特色及其他要素的回應式設計。

隨堂測驗

測試您對回應式媒體查詢的瞭解程度。