媒體功能

媒體功能可讓您回應裝置和偏好設定的所有方式總覽。

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

不過,隨著媒體查詢的推出,這一切都改變了。設計師終於能與使用者達成共識。設計人員可以調整版面配置,以回應使用者的裝置。

請注意,媒體查詢包含選用媒體類型和強制媒體功能。多年以來,媒體類型並未發生太大變化。仍只有四個可能的值:

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

另一方面,媒體功能則大幅擴增。設計師現在可以滿足使用者需求,不只針對螢幕大小調整設計。

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

可視區域尺寸

目前網路上最熱門的媒體查詢是可處理可視區域寬度的查詢。但即使在這種情況下,您仍可選擇是否要提供資訊。您可以使用 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- 前置字的選擇不只適用於 widthheightaspect-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 媒體功能可能更符合您的需求。這個值有兩種可能的值:portraitlandscape

@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 媒體功能調整這些動畫和轉場效果,以便回應不同的更新率。這個媒體功能會回報下列三個值中的一個:noneslowfast

如果 update 值為 none,表示沒有重新整理頻率。舉例來說,您無法更新已列印的網頁。

如果 update 值為 slow,表示螢幕無法快速更新。電子墨水螢幕就是刷新率較慢的螢幕之一。

如果 update 值為 fast,表示螢幕刷新速度足以處理動畫和轉場效果。

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

螢幕的某些方面與硬體功能無關,在主題設定模組中,您已瞭解如何在網頁應用程式資訊清單檔案中定義屬性。其中一個屬性稱為 display,您可以為其指定 fullscreenstandaloneminimum-uibrowser 的值。您可以使用對應的 display-mode 媒體功能,為這些不同選項調整樣式。

假設您在網頁應用程式資訊清單中提供 displaystandalone。如果有人將你的網站新增至主畫面,該網站就會在沒有任何瀏覽器介面下啟動。您可以為這些使用者顯示返回按鈕。

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-gamutcolor-indexdynamic-range 編寫查詢。所有這些報告都會提供螢幕的色彩功能相關詳細資訊。

在這個範例中,顏色值會根據 dynamic-range 媒體功能進行更新,該功能會回報螢幕的最大亮度、色彩深度和對比率組合。可能的值為 standardhigh。高畫質螢幕回報的 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);
  }
}

互動

媒體功能還可以回報用於與網站互動的輸入機制類型:hoverany-hoverpointerany-pointer。詳情請參閱互動模組

偏好設定

您可以使用各種媒體查詢來回應使用者偏好設定:prefers-color-schemeprefers-contrastprefers-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-colorsinverted-colors 媒體功能會回報裝置是否使用受限或反轉的調色盤。

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

使用者可以透過名為 prefers-reduced-data 的媒體功能,指定自己使用的是計量連線,讓您傳送較小的素材資源或較少的素材資源。

其他提案仍在擬定中。在下一 (也是最後) 單元中,您將瞭解媒體功能的提案,瞭解如何處理不同的螢幕設定。

進行隨堂測驗

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

媒體查詢可以檢查特定寬度的裝置,例如 @media (width: 1024px)

您必須同時檢查 1023px 上方和 1025px 下方的寬度,才能完成特定寬度。
min-widthmax-width 是可用的選項。

媒體查詢可以檢查特定 aspect-ratio (例如 @media (aspect-ratio: 4/3)) 的裝置嗎?

可比對單一比例的顯示比例。
aspect-ratio 確實有這個選項。

哪些是有效的顏色媒體查詢?

@media (color)
可搭配任何顏色的裝置。
@media (monochrome)
比對任何不支援顏色的裝置。
@media (color-gamut: srgb)
比對支援 sRGB 色彩的裝置。
@media (min-color-index: 15000)
比對至少有 15,000 種顏色的裝置。
@media (dynamic-range: high)
比對支援 HD 色域的裝置。

下列哪些使用者偏好設定媒體查詢有效?

@media (prefers-color-scheme: dark)
使用者將作業系統設定為深色模式時,系統會比對這個條件。
@media (prefers-colors: high-definition)
不真實。
@media (prefers-reduced-motion: reduce)
使用者將作業系統設為減少動畫時,系統會比對此值。
@media (prefers-contrast: more)
使用者將作業系統設定為高對比時,系統會比對。
@media (prefers-site-speed: fast)
不真實。