@媒体 | @media

@media CSS at-rule可以根据一个或多个媒体查询的结果来应用样式，这些查询会测试设备的类型、特定特征和环境。

在CSS中，@media规则可以放在代码的顶层，也可以嵌套在任何其他条件组。=(conditional group at-rule.)

/* Media query */
@media screen and (min-width: 900px) {
  article {
?   padding: 1rem 3rem;
? }
}

/* Nested media query */
@supports (display: flex) {
? @media screen and (min-width: 900px) {
?   article {
?     display: flex;
?   }
  }
}

除了在@media规则中应用时，媒体查询也可以应用于HTML。<link>元素将整个样式表限制为特定媒体。

<!-- Media-dependent style sheet included in HTML -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" />

注：在JavaScript中，@media可以通过CSSMediaRuleCSS对象模型接口。

语法

@media at-rule由一个或多个媒体查询组成，每个查询都包含一个可选的媒体类型和任意数量的媒体特征表达式。可以通过使用逻辑运算符以各种方式组合多个查询，而且不区分大小写。

只有当媒体查询计算为true时，即当指定的媒体类型与显示在其上的设备类型匹配时，才会应用相应的样式。以及当所有媒体功能表达式都计算为真时，同上。

涉及未知媒体类型的查询总是错误的。

注：即使查询返回false，带有媒体查询的样式表<link>标签仍将下载。不过，除非查询结果更改为true，否则它的内容将不适用。

媒体类型

媒体类型 描述设备的一般类别。除非您使用not或only逻辑运算符，媒体类型是可选的，all类型将被隐藏。

all适用于所有设备。print用于分页材料和在打印预览模式下在屏幕上查看的文档。请参阅传呼媒体，以及入门教程的媒体部分有关特定于分页媒体的格式化问题的信息。screen主要用于彩色电脑屏幕。speech用于语音合成器。

已弃用的媒体类型: CSS2.1和 Media Queries 3定义了一些额外的媒体类型(tty, tv, projection, handheld, braille, embossed, and aural)，但它们在Media Queries 4中被弃用，不应该被使用。aural型已经被speech型取代，这是相似的。

媒体特征

媒体特征表达式的特定特性的测试用户代理、输出设备或环境。它们完全是可选的。每个媒体特性表达式必须被括号包围。

Name	Summary	Notes
width	Width of the viewport	?
height	Height of the viewport	?
aspect-ratio	Width-to-height aspect ratio of the viewport	?
orientation	Orientation of the viewport	?
resolution	Pixel density of the output device	?
scan	Scanning process of the output device	?
grid	Does the device use a grid or bitmap screen?	?
update	How frequently the output device can modify the appearance of content	Added in Media Queries Level 4.
overflow-block	How does the output device handle content that overflows the viewport along the block axis?	Added in Media Queries Level 4.
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled?	Added in Media Queries Level 4.
color	Number of bits per color component of the output device, or zero if the device isn't color	?
color-gamut	Approximate range of colors that are supported by the user agent and output device	Added in Media Queries Level 4.
color-index	Number of entries in the output device's color lookup table, or zero if the device does not use such a table	?
display-mode	The display mode of the application, as specified in the web app manifest's display member	Defined in the Web App Manifest spec.
monochrome	Bits per pixel in the output device's monochrome frame buffer, or zero if the device isn't monochrome	?
inverted-colors	Is the user agent or underlying OS inverting colors?	Deferred to Media Queries Level 5.
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it?	Added in Media Queries Level 4.
hover	Does the primary input mechanism allow the user to hover over elements?	Added in Media Queries Level 4.
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it?	Added in Media Queries Level 4.
any-hover	Does any available input mechanism allow the user to hover over elements?	Added in Media Queries Level 4.
light-level	Light level of the environment	Deferred to Media Queries Level 5.
scripting	Is scripting (e.g., JavaScript) available?	Deferred to Media Queries Level 5.
device-width	Width of the rendering surface of the output device	Deprecated in Media Queries Level 4.
device-height	Height of the rendering surface of the output device	Deprecated in Media Queries Level 4.
device-aspect-ratio	Width-to-height aspect ratio of the output device	Deprecated in Media Queries Level 4.

逻辑运算符

逻辑运算符not、and，和only可用于编写复杂的媒体查询。您还可以使用逗号分隔的列表将多个媒体查询组合成一个规则。

`and`

and 运算符用于将多个媒体特性组合到一个单独的媒体查询中，要求每个链接的特性返回true，以便查询为真。它还被用于加入媒体类型的媒体功能。

`not`

not运算符用于否定媒体查询，如果查询不返回false，则返回true。如果出现在逗号分隔的列表中，它只会否定应用它的特定查询。如果使用not运算符，则必须指定显式媒体类型。

注：not关键字不能用于否定单个功能表达式，仅用于整个媒体查询。

`only`

only运算符 仅用于整个查询匹配应用样式，并且对防止旧的浏览器应用从选定的样式很有用。如果使用not运算符，则必须指定显式媒体类型。

逗号分隔列表

逗号分隔的媒体查询列表中的每个查询，都与其他查询分开处理。如果列表中的任何查询为真，则整个媒体语句返回true。换句话说，列表的行为就像逻辑运算符or。

形式语法

@media <media-query-list> {
  <group-rule-body>
}where 
<media-query-list> = <media-query>#
where 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where 
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>
where 
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>
where 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
where 
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>
where 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

实例

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

有关更多媒体特性示例，请参见每个特定功能的参考页面。有关更多逻辑运算符示例，请参见使用媒体查询...

规范

Specification	Status	Comment
CSS Conditional Rules Module Level 3The definition of '@media' in that specification.	Candidate Recommendation	Defines the basic syntax of the @media rule.
Media Queries Level 4The definition of '@media' in that specification.	Working Draft	Adds scripting, pointer, hover, light-level, update-frequency, overflow-block, and overflow-inline media features. Deprecates all media types except for screen, print, speech, and all. Makes the syntax more flexible by adding, among other things, the or keyword.
Media QueriesThe definition of '@media' in that specification.	Recommendation	No change.
CSS Level 2 (Revision 1)The definition of '@media' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support (all, print, screen media types)	1.0	(Yes)	1.0 (1.7 or earlier)	6.0	9.2	1.3
speech media type	No support	No support	No support	No support	9.2	No support
Media features	1.0	(Yes)	1.0 (1.7 or earlier)	9.0	9.2	1.3
resolution media feature	29	?	3.5 (1.9.1) 2 8.0 (8.0) 3	?	(Yes)	?
display-mode media feature	?	No support	47 (47)1	?	?	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support (all, print, screen media types)	1.0	(Yes)	1.0 (1.7)	(Yes)	9.0	3.1
speech media type	No support	No support	No support	No support	9.0	No support
Media features	1.0	(Yes)	1.0 (1.7)	(Yes)	9.0	3.1
resolution media feature	?	?	?	?	?	?
display-mode media feature	?	No support	47.0 (47)1	?	?	?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18