媒體功能

我們總結了使用媒體功能回應裝置及 偏好設定。

如果沒有媒體查詢，就無法使用回應式設計。在媒體查詢之前，我們無法得知使用者是透過哪種裝置造訪你的網站。設計師不得不做出假設這些假設已編碼為固定寬度設計或液體版面配置。

但隨著媒體查詢推出，這個情況有了改變。史上首創的設計師 可以與人相遇設計師可以根據使用者的裝置調整版面配置。

提醒你，媒體查詢包含選用的媒體類型和必要的媒體功能。但近幾年來媒體類型並沒有太大的改變。可能仍只有四種值：

@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。回報 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。詳情請參閱「互動相關單元」。

偏好設定

有多種媒體查詢可讓您回應使用者偏好，例如：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 的媒體功能可讓使用者指明使用的是計量付費連線，以便您傳送更小或更少的資產。

其他提案仍在調整中。在下一個單元中，您將瞭解針對處理不同螢幕設定的媒體功能提案。

隨堂測驗

測試你對媒體功能的相關知識