@media
Baseline 廣泛可用 *
@media 這個 CSS @ 規則可用於根據一個或多個媒體查詢的結果來應用樣式表的一部分。透過它，你可以指定一個媒體查詢和一個 CSS 塊，當且僅當該媒體查詢與正在使用內容的裝置匹配時，該 CSS 塊才會應用於該文件。
備註： 在 JavaScript 中，可以使用 CSSMediaRule CSS 物件模型介面訪問使用 @media 建立的規則。
試一試
abbr {
color: #860304;
font-weight: bold;
transition: color 0.5s ease;
}
@media (hover: hover) {
abbr:hover {
color: #001ca8;
transition-duration: 0.5s;
}
}
@media not all and (hover: hover) {
abbr::after {
content: " (" attr(title) ")";
}
}
<p>
<abbr title="National Aeronautics and Space Administration">NASA</abbr> is a
U.S. government agency that is responsible for science and technology related
to air and space.
</p>
語法
/* At the top level of your code */
@media screen and (width >= 900px) {
article {
padding: 1rem 3rem;
}
}
/* Nested within another conditional at-rule */
@supports (display: flex) {
@media screen and (width >= 900px) {
article {
display: flex;
}
}
}
@media @ 規則可以放在程式碼的頂層，也可以巢狀在任何其他條件組 @ 規則中。
關於媒體查詢語法的討論，請參閱使用媒體查詢。
描述
媒體查詢的 <media-query-list> 包括<media-type>（媒體型別）、<media-feature>（媒體特性）和邏輯運算子。
媒體型別
<media-type> 描述裝置的一般類別。除非使用 only 邏輯運算子，否則媒體型別是可選的，並會隱含 all 型別。
媒體特性
<media feature> 描述了使用者代理、輸出裝置或環境的特定特徵。媒體特性表示式測試它們的存在性、值或值的範圍，並且是完全可選的。每個媒體特性表示式都必須用括號括起來。
any-hover-
是否有任何可用的輸入機制允許使用者懸停在元素上？
any-pointer-
是否有任何可用的輸入機制是指標裝置，如果是，它的精確度如何？
aspect-ratio-
視口的寬高縱橫比。
color-
輸出裝置每個顏色分量的位數，如果裝置不是彩色的，則為零。
color-gamut-
使用者代理和輸出裝置支援的近似顏色範圍。
color-index-
輸出裝置顏色查詢表中的條目數，如果裝置不使用此類表，則為零。
device-aspect-ratio-
輸出裝置的寬高縱橫比。在媒體查詢第 4 級中已棄用。
device-height-
輸出裝置渲染表面的高度。在媒體查詢第 4 級中已棄用。
device-posture-
檢測裝置的當前姿勢，即視口處於展開還是摺疊狀態。在裝置姿勢 API 中定義。
device-width-
輸出裝置渲染表面的寬度。在媒體查詢第 4 級中已棄用。
display-mode-
應用程式的顯示模式：例如，fullscreen（全屏）或 picture-in-picture（畫中畫）模式。在媒體查詢第 5 級中新增。
dynamic-range-
使用者代理和輸出裝置支援的亮度、對比度和顏色深度的組合。在媒體查詢第 5 級中新增。
forced-colors-
檢測使用者代理是否限制了調色盤。在媒體查詢第 5 級中新增。
grid-
裝置是使用網格螢幕還是點陣圖螢幕？
height-
視口的高度。
horizontal-viewport-segments-
檢測裝置是否具有指定數量的水平排列的視口段。
hover-
主要輸入機制是否允許使用者懸停在元素上？
inverted-colors-
使用者代理或底層作業系統是否反轉顏色？在媒體查詢第 5 級中新增。
monochrome-
輸出裝置單色幀緩衝區中每畫素的位數，如果裝置不是單色的，則為零。
orientation-
視口的方向。
overflow-block-
輸出裝置如何處理沿塊軸溢位視口的內容？
overflow-inline-
沿行內軸溢位視口的內容是否可以滾動？
pointer-
主要輸入機制是否為指標裝置，如果是，它的精確度如何？
prefers-color-scheme-
檢測使用者是否偏好淺色或深色方案。在媒體查詢第 5 級中新增。
prefers-contrast-
檢測使用者是否已請求系統增加或減少相鄰顏色之間的對比度。在媒體查詢第 5 級中新增。
prefers-reduced-data-
檢測使用者是否已請求消耗較少網際網路流量的 Web 內容。
prefers-reduced-motion-
使用者偏好頁面上較少的動態效果。在媒體查詢第 5 級中新增。
prefers-reduced-transparency-
檢測使用者是否在其裝置上啟用了減少透明或半透明圖層效果的設定。
resolution-
輸出裝置的畫素密度。
scan-
顯示輸出是逐行掃描還是隔行掃描。
scripting-
檢測指令碼（即 JavaScript）是否可用。在媒體查詢第 5 級中新增。
shape-
檢測裝置的形狀以區分矩形和圓形顯示器。
update-
輸出裝置可以修改內容外觀的頻率。
vertical-viewport-segments-
檢測裝置是否具有指定數量的垂直排列的視口段。在媒體查詢第 5 級中新增。
video-dynamic-range-
使用者代理的影片平面和輸出裝置支援的亮度、對比度和顏色深度的組合。在媒體查詢第 5 級中新增。
width-
視口的寬度，包括捲軸的寬度。
-moz-device-pixel-ratio-
每個 CSS 畫素對應的裝置畫素數。請改用帶有
dppx單位的resolution特性。 -webkit-animation-
瀏覽器支援帶
-webkit字首的 CSSanimation。請改用@supports (animation)特性查詢。 -webkit-device-pixel-ratio-
每個 CSS 畫素對應的裝置畫素數。請改用帶有
dppx單位的resolution特性。 -webkit-transform-2d-
瀏覽器支援帶
-webkit字首的 2D CSStransform。請改用@supports (transform)特性查詢。 -webkit-transform-3d-
瀏覽器支援帶
-webkit字首的 3D CSStransform。請改用@supports (transform)特性查詢。 -webkit-transition-
瀏覽器支援帶
-webkit字首的 CSStransition。請改用@supports (transition)特性查詢。
邏輯運算子
邏輯運算子 not、and、only 和 or 可用於構成複雜的媒體查詢。你還可以透過用逗號分隔多個媒體查詢，將它們組合成一個規則。
and-
用於將多個媒體特性組合成一個媒體查詢，要求每個連結的特性都返回
true，查詢才為true。它也用於將媒體特性與媒體型別連線起來。 not-
用於否定一個媒體查詢，如果查詢原本返回
false，則返回true。如果出現在逗號分隔的查詢列表中，它將只否定其應用到的特定查詢。備註： 在第 3 級規範中，
not關鍵字不能用於否定單個媒體特性表示式，只能否定整個媒體查詢。 only-
僅在整個查詢匹配時才應用樣式。它有助於防止舊版瀏覽器應用選定的樣式。不使用
only時，舊版瀏覽器會將查詢screen and (width <= 500px)解釋為screen，忽略查詢的其餘部分，並將其樣式應用於所有螢幕。如果使用only運算子，你還必須指定媒體型別。 ,（逗號）-
逗號用於將多個媒體查詢組合成一個規則。逗號分隔列表中的每個查詢都與其他查詢分開處理。因此，如果列表中的任何一個查詢為
true，則整個媒體語句返回true。換句話說，列表的行為類似於邏輯or運算子。 or-
等同於
,運算子。在媒體查詢第 4 級中新增。
使用者代理客戶端提示
一些媒體查詢有對應的使用者代理客戶端提示。這些是 HTTP 標頭，用於請求為特定媒體需求預先最佳化的內容。它們包括 Sec-CH-Prefers-Color-Scheme 和 Sec-CH-Prefers-Reduced-Motion。
正式語法
@media =
@media <media-query-list> { <rule-list> }
無障礙
為了最好地適應調整網站文字大小的使用者，當需要為媒體查詢指定<length>時，請使用em。
em 和 px 都是有效單位，但如果使用者更改瀏覽器文字大小，em 的效果更好。
還可以考慮使用媒體查詢或HTTP 使用者代理客戶端提示來改善使用者體驗。例如，媒體查詢 prefers-reduced-motion 或等效的 HTTP 標頭 Sec-CH-Prefers-Reduced-Motion 可用於根據使用者偏好最小化動畫或動態效果的使用。
安全
由於媒體查詢提供了有關使用者正在使用的裝置的能力——以及由此引申的裝置特性和設計——的見解，因此它們有可能被濫用以構建“指紋”來識別裝置，或至少在某種程度上對裝置進行分類，這可能是使用者不希望的。
由於這種可能性，瀏覽器可能會選擇以某種方式模糊返回的值，以防止它們被用於精確識別計算機。瀏覽器也可能在這方面提供額外的措施；例如，如果啟用了 Firefox 的“抵抗指紋識別”設定，許多媒體查詢會報告預設值，而不是代表實際裝置狀態的值。
示例
測試 print 和 screen 媒體型別
@media print {
body {
font-size: 10pt;
}
}
@media screen {
body {
font-size: 13px;
}
}
@media screen, print {
body {
line-height: 1.2;
}
}
範圍語法允許在測試任何接受範圍的特性時使用更簡潔的媒體查詢，如下例所示
@media (height > 600px) {
body {
line-height: 1.4;
}
}
@media (400px <= width <= 700px) {
body {
line-height: 1.4;
}
}
更多示例，請參閱使用媒體查詢。
規範
| 規範 |
|---|
| 媒體查詢第 4 級 # media-descriptor-table |
| CSS 條件規則模組第 3 級 # at-media |
瀏覽器相容性
載入中…