媒體功能

如果沒有媒體查詢，就不會有回應式設計。在媒體查詢出現之前，我們無法得知使用者造訪網站時所用的裝置類型。設計人員必須做出假設。這些假設會編碼為固定寬度設計或流動版面配置。

媒體查詢推出後，情況就完全不同了。設計師首次可以與人會面。設計師可以調整版面配置，配合使用者的裝置。

請注意，媒體查詢包含選用的媒體類型和必要的媒體功能。多年來，媒體類型變化不大。可能的值仍只有四個：

@media all
@media screen
@media print
@media speech

另一方面，媒體功能則大幅擴展。設計師現在可以進一步滿足使用者需求，調整設計以適應各種螢幕尺寸。

可視區域尺寸

網路上最熱門的媒體查詢，是處理可視區域寬度的查詢。但即使是這種情況，您還是可以選擇。您可以使用 max-width 媒體功能，在特定寬度以下套用樣式，也可以使用 min-width 媒體功能，在特定寬度以上套用樣式。

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

就我個人而言，我喜歡使用 min-width。我會以累加方式套用版面配置樣式。我在每個中斷點導入新的版面配置規則，而不是取消先前的規則。

這種加法方法也適用於高度。使用 min-height，您可以在更多可用的檢視區塊高度下導入更多規則。舉例來說，如果垂直空間足夠，您可能想將標頭元素錨定至瀏覽器視窗頂端。

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

但你也可以視需要使用 max-height 媒體功能。在此，標頭預設會錨定，但如果垂直空間不足，就會移除黏性。

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

選擇 min- 和 max- 前置字元不僅適用於 width 和 height，aspect-ratio 媒體功能也提供相同選項。如果您想以確切的寬高比套用樣式，也可以使用未加前置字元的版本。

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

為不同顯示比例提供不同樣式，很快就會變得難以管理。如果不需要這麼精細的控制層級，orientation 媒體功能可能更符合您的需求。可能的值為 portrait 或 landscape。

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

雖然「直向」和「橫向」這兩個詞最常指行動裝置的方向，但 orientation 媒體功能並非裝置專用。一般筆電的全螢幕瀏覽器視窗 orientation 值為 landscape。

螢幕

不同螢幕的像素密度不同，以每英吋點數 (dpi) 為單位。您可以使用 resolution 媒體功能，針對不同像素密度調整樣式。與 aspect-ratio 相同，resolution 有三種變體：最小值、最大值和確切值。

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

您可能永遠不需要使用任何 resolution 媒體查詢。像素密度通常只會影響圖片，而回應式圖片則是在 HTML 中直接處理像素密度問題的方法。

另一方面，CSS 則是用來定義動畫和轉場效果。您可以使用 update 媒體功能調整這些動畫和轉場效果，以因應不同的重新整理率。這項媒體功能會回報下列其中一個值：none、slow 和 fast。

update 值為 none 表示沒有重新整理頻率。舉例來說，列印的網頁就無法更新。

update 值為 slow 表示螢幕無法快速更新。電子墨水螢幕就是刷新率較低的螢幕。

update 值為 fast 表示螢幕的刷新速度夠快，可處理動畫和轉場效果。

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

螢幕顯示的內容不一定都與硬體功能有關。在主題設定模組中，您已瞭解如何在網頁應用程式資訊清單檔案中定義屬性。其中一個屬性稱為 display，您可以將其值設為 fullscreen、standalone、minimum-ui 或 browser。對應的 display-mode 媒體功能可讓您為這些不同選項調整樣式。

假設您在網頁應用程式資訊清單中提供 display 值 standalone。如果有人將您的網站新增至主畫面，系統會啟動網站，但不會顯示任何瀏覽器介面。您可能會決定為這些使用者顯示返回按鈕。

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

顏色

您可以透過多種媒體功能查詢裝置的色彩功能。如要調整只輸出灰階的螢幕樣式，可以使用不含任何值的 monochrome 媒體功能。

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

有對應的 color 媒體功能。

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

如果是彩色螢幕，您可以使用 color-gamut、color-index 或 dynamic-range 媒體功能編寫查詢。這些都會回報螢幕色彩功能的具體詳細資料。

在本例中，顏色值會根據 dynamic-range 媒體功能更新，該功能會回報螢幕的最大亮度、色彩深度和對比度組合。可能的值為 standard 或 high。如果高畫質螢幕回報的 dynamic-range 值為 high，則會使用新的 CSS color() 函式取得不同的色彩空間。

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

互動

媒體功能也可以回報與網站互動時使用的輸入機制類型：hover、any-hover、pointer 和 any-pointer。詳情請參閱互動主題的模組。

使用者偏好設定查詢

您可以透過 CSS 與使用者協作，確保他們能以適合自己的方式存取內容。在本課程中，您已學會如何根據使用者裝置的尺寸和功能套用不同的 CSS。但您也可以根據使用者的設定套用不同的 CSS。

深色模式和淺色模式

您可以根據使用者的淺色或深色主題偏好設定做出回應。許多使用者會將這項設定設為系統偏好設定。

設定 UI 元素的色彩配置

瀏覽器會為捲軸和表單元素等項目提供預設顏色。您可以指定要為使用 color-scheme: light 的使用者套用淺色主題，還是為使用 color-scheme: dark 的使用者套用深色主題。您也可以使用 color-scheme: light dark 指定網頁同時支援這兩者。您可以在 :root 或 html 元素中設定這個屬性，為整個網頁設定架構，也可以覆寫特定元素的設定。

您也可以設定 meta 標記，在樣式載入前設定網頁的配置。color-scheme如果您在網頁中的元素上設定 color-scheme: normal，系統會使用您在這個中繼標記中設定的 color-scheme 值。

<meta name="color-scheme" content="dark light">

prefers-color-scheme 媒體功能

您也可以使用 prefers-color-scheme 的媒體查詢，根據使用者偏好的顏色主題定義自訂樣式。

light-dark

如果您提供淺色和深色主題供使用者選擇，可能會發現在媒體查詢中設定每個顏色很冗長。light-dark() 可讓您在單一屬性中同時指定兩者。

如要啟用這項功能，請在元素或其任一上層元素上設定 color-scheme: light dark。 請先設定要在淺色模式中使用的顏色，然後設定要在深色模式中使用的顏色。

h1{
  color: light-dark( var(--text-light), var(--text-dark));
}

如果使用者將系統偏好設定設為要求淺色模式，標題就會顯示為黑色。如果使用者偏好深色模式，標題就會顯示白色。

對比偏好設定

使用者可能會覺得高或低對比度較容易閱讀內容，並將系統設為覆寫您的主題，改用最適合自己的設定。您的職責是確保網站仍能配合他們的偏好設定運作。

您可能還記得，在「Cascade」模組中，!important本機使用者樣式可以覆寫網頁提供的撰寫樣式。讓使用者選擇更適合自己的樣式。

強制色彩

Windows 提供「對比主題」，使用者選取後即可覆寫網站上的主題。這類主題通常對比度高，且可能為淺色或深色模式。在 CSS 中，這稱為強制色彩，在大多數情況下，您的網站在此模式中會如預期運作。按鈕、連結、輸入內容和其他內容會使用主題的顏色。

有時您可能需要調整樣式，例如以非標準方式使用元素時。使用者啟用強制色彩時，您可以使用 @media (forced-colors: active) 媒體查詢套用樣式。

在某些情況下，網站的樣式是瞭解內容本身的必要條件，例如顏色挑選器或附有顏色鍵的圖表。您可以在元素上設定 forced-color-adjust: none;，選擇停用強制色彩模式。請務必只針對特定元素停用，並確認在強制色彩模式下仍可存取內容。

高對比

部分使用者也可能會將系統設為要求提高對比度。您可以使用 prefers-contrast: more 媒體查詢調整回應中的樣式。

減少動態效果

您可以使用 prefers-reduced-motion 媒體查詢，回應使用者對減少動作效果的偏好設定。這項功能通常用於提供替代動畫，避免可能引發癲癇、前庭運動障礙或偏頭痛的劇烈動作。詳情請參閱「使用動畫時的注意事項」。

影片腳本

使用者可能會在停用 JavaScript 的情況下造訪您的網站，您可以調整 CSS，讓他們仍能使用 scripting 媒體查詢存取內容。

@media (scripting: none) {
  /* Styles when JavaScript is disabled*/
 }

@media (scripting: initial-only) {
  /* Styles when JavaScript is available only for an initial render, for example with a printed page or server side rendering */
}

@media (scripting: enabled) {
   /* Styles when Javascript is enabled */
}

隨堂測驗

測試您對媒體功能的瞭解程度