媒體功能可讓您回應裝置和偏好設定的所有方式總覽。
如要實現回應式設計,就必須使用媒體查詢。在媒體查詢出現之前,我們無法得知使用者造訪網站時使用的裝置類型。設計人員必須做出假設。這些假設會編碼為固定寬度設計或流動版面配置。
不過,隨著媒體查詢的推出,這一切都改變了。設計師終於能與使用者達成共識。設計人員可以調整版面配置,以回應使用者的裝置。
請注意,媒體查詢包含選用媒體類型和強制媒體功能。多年以來,媒體類型並未發生太大變化。仍只有四個可能的值:
@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
。詳情請參閱互動模組。
偏好設定
您可以使用各種媒體查詢來回應使用者偏好設定: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
的媒體功能,指定自己使用的是計量連線,讓您傳送較小的素材資源或較少的素材資源。
其他提案仍在擬定中。在下一 (也是最後) 單元中,您將瞭解媒體功能的提案,瞭解如何處理不同的螢幕設定。
進行隨堂測驗
測驗您對媒體功能的相關知識
媒體查詢可以檢查特定寬度的裝置,例如 @media (width: 1024px)
?
1023px
上方和 1025px
下方的寬度,才能完成特定寬度。min-width
和 max-width
是可用的選項。媒體查詢可以檢查特定 aspect-ratio
(例如 @media (aspect-ratio: 4/3)
) 的裝置嗎?
aspect-ratio
確實有這個選項。哪些是有效的顏色媒體查詢?
@media (color)
@media (monochrome)
@media (color-gamut: srgb)
@media (min-color-index: 15000)
@media (dynamic-range: high)
下列哪些使用者偏好設定媒體查詢有效?
@media (prefers-color-scheme: dark)
@media (prefers-colors: high-definition)
@media (prefers-reduced-motion: reduce)
@media (prefers-contrast: more)
@media (prefers-site-speed: fast)