媒體功能

透過媒體功能回應裝置和偏好設定的所有重點摘要。

少了媒體查詢，就無法使用回應式設計。在媒體查詢之前，無法得知使用者以哪種裝置造訪網站。設計師們必須做出假設這些假設已編碼為固定寬度的設計或液態版面配置。

隨著媒體查詢推出，這個做法也徹底改變。這項設計首次可以與人見面，設計人員可以根據使用者的裝置調整版面配置。

請記住，媒體查詢包含選用的媒體類型和一個必要的媒體功能。這些年來，媒體類型的數量並沒有太大變化，可能仍有四個可能的值：

@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 媒體功能可讓您為不同選項自訂樣式。

假設您在網頁應用程式資訊清單中提供 standalone 的 display 值，如果有人將您的網站加到主畫面，網站不需任何瀏覽器介面就能啟動。建議您為這些使用者顯示返回按鈕。

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。使用新的 CSS color() 函式就報告 dynamic-range 值 high 的高畫質畫面會有不同的色彩空間。

.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。詳情請參閱互動單元。

偏好設定

您可以運用各種媒體查詢來回應使用者偏好設定：prefers-color-scheme、prefers-contrast 和 prefers-reduced-motion。詳情請參閱主題和無障礙功能的相關單元。

您可以在一項媒體查詢中合併媒體功能。您可以調整動畫樣式的範圍，讓系統只在裝置的刷新率快速，且使用者未表達出變焦效果的偏好設定時，才會套用這些樣式。

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

更多媒體功能

未來還會推出更多媒體功能。

forced-colors 和 inverted-colors 媒體功能會回報裝置目前使用的是受限製或反轉的調色盤。

scripting 媒體功能可讓您根據 JavaScript 的可用性調整 CSS。

使用者可使用名為 prefers-reduced-data 的媒體功能，指明自己使用的是計量付費連線，因此您可以傳送更小或較少的素材資源。

目前仍在規劃其他提案。在下一個和最後的單元中，我們將介紹一項適用於處理不同螢幕設定之媒體功能的提案。

隨堂測驗

測驗您對於媒體功能的相關知識