媒體查詢

設計師可以配合使用者調整設計。 最明顯的例子是使用者裝置的板型規格,包括寬度、裝置顯示比例等等。設計人員可以使用媒體查詢,回應這些不同板型規格。

媒體查詢是透過 @media 關鍵字 (即 CSS 規則型) 啟動,可用於各種用途。

網站通常會顯示在螢幕上,但 CSS 也可以用於為其他輸出內容設定網站樣式。您可能希望網頁在螢幕上顯示的樣貌與列印時有所不同。您可以透過查詢媒體類型來實現這項功能。

在這個範例中,背景顏色設為灰色。但如果是列印頁面,則背景顏色應為透明。這樣可節省使用者的印表機墨水。

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

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

您可以在樣式表中使用 @media at-rule,也可以建立個別的樣式表,並在 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 at-rule。

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

在回應式設計中,最實用的媒體功能之一是瀏覽器可視區域的尺寸。如要在瀏覽器視窗寬度超過特定寬度時套用樣式,請使用 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 長度單位。如果您的內容主要以圖片為主,那麼像素可能最適合您。如果您的內容大多以文字為主,建議您使用以文字大小為依據的相對單位,例如 emch

@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;
  }
}

組合

您可以依據可視區域的高度使用媒體查詢,而不只是根據寬度。 有助於最佳化「不需捲動位置」的介面內容。在前述範例中,如果讀者使用寬度較寬但高度較短的瀏覽器視窗,就必須向下捲動一欄,然後再向上捲動,才能到達第二欄的頂端。只有在可視區域的寬度和高度都足夠時,才建議套用資料欄。

您可以合併媒體查詢,讓樣式只在所有條件都符合時才適用。 在本例中,可視區域寬度至少須為 50em60em,才能套用資料欄樣式。 這些中斷點是根據內容量來選擇。

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

這些範例說明如何使用媒體查詢,將設計調整為符合使用者裝置的板型,但這只是可能性的一小部分。媒體查詢不僅可用於寬度和高度,還可用於存取使用者針對無障礙功能和主題顏色的偏好設定。使用媒體查詢調整版面配置,是打造回應式設計的絕佳起點,這類設計會運用這些功能和其他功能。

隨堂測驗

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

媒體查詢只適用於螢幕大小嗎?

false
true

螢幕是唯一會顯示或顯示網頁內容的位置嗎?

false
true

預設媒體類型為?

landscape
some
none
all
screen

如何避免瀏覽器在行動裝置上縮放設計?

媒體查詢
width: 100%
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML5
font-size: 200%

當瀏覽器視窗「高於」720px 時,適用哪個媒體查詢。

@media (max-width: 720px)
@media (min-width: 720px)
@media (clamp-width: 720px)
@media (width: 720px)