这篇翻译不完整。请帮忙从英语翻译这篇文章。
概述
@media
CSS @规则 可用于根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。
在CSS中,@media
规则可置于您代码的顶层或位于其它任何@条件规则组内。
/* 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
可通过CSSMediaRule
CSS 对象模型接口访问。
语法
@media
@规则由一个或多个媒体查询组成,每个媒体查询包含一个可选的媒体类型和若干媒体特性。多个查询可通过使用逻辑运算符以多种方式组合起来,且对大小写敏感。
仅当媒体查询计算为真时,即,当指定的媒体类型与正在显示文档的设备的类型匹配并且所有媒体特征表达式计算为真时,才应用相应的样式。涉及未知媒体类型的查询总是错误的。
媒体类型
媒体类型描述设备的一般类别。除非您使用not
或only
逻辑运算符,否则媒体类型是可选的,并且将隐含使用all
类型。
- all
- 适用于所有设备。
- 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media(媒体屏幕尺寸), 以满足个别设备网页尺寸不匹配等问题。
- screen
- 主要适用于彩色的电脑屏幕
- speech
- 解析speech这个合成器. 注意: CSS2已经有一个相似的媒体类型叫aural.可以看以下附录
tty,
tv,
projection,
handheld,
braille,
embossed,
aural
),但它们在媒体查询4中被废弃因而不应被使用。媒体特性
针对每个浏览器和不同设备都有各自的媒体特性
Name | Summary | Notes |
---|---|---|
width |
可视宽度 | |
height |
可视高度 | |
aspect-ratio |
定义输出设备中的页面可见区域宽度与高度的比率 | |
orientation |
定义输出设备中的页面可见区域高度是否大于或等于宽度 | |
resolution |
定义设备的分辨率 | |
scan |
定义电视类设备的扫描工序 | |
grid |
用来查询输出设备是否使用栅格或点阵 | |
update-frequency |
How quickly (if at all) can the output device modify the appearance of the 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 |
定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 | |
color-index |
定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 | |
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 |
定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 | |
inverted-colors |
Is the user agent or underlying OS inverting colors? | Added in Media Queries Level 4 |
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? | |
any-hover |
Does any available input mechanism allow the user to hover over elements? | |
light-level |
Current ambient light level | Added in Media Queries Level 4 |
scripting |
Is scripting (e.g. JavaScript) available? | Added in Media Queries Level 4 |
device-width |
定义输出设备的屏幕可见宽度。 | Deprecated in Media Queries Level 4 |
device-height |
定义输出设备的屏幕可见高度。 | Deprecated in Media Queries Level 4 |
device-aspect-ratio |
定义输出设备的屏幕可见宽度与高度的比率。 | Deprecated in Media Queries Level 4 |
-webkit-device-pixel-ratio |
设备像素比 | 非标准的;WebKit/Blink-specific. 最好使用 resolution 媒体特性代替 |
-webkit-transform-3d |
Are CSS 3D transform s supported? |
Nonstandard; WebKit/Blink-specific |
-webkit-transform-2d |
Are CSS 2D transform s supported? |
Nonstandard; WebKit-specific |
-webkit-transition |
Are CSS transition s supported? |
Nonstandard; WebKit-specific |
-webkit-animation |
Are CSS animation s supported? |
Nonstandard; WebKit-specific |
示例
@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 (-webkit-min-device-pixel-ratio: 2) { body { line-height: 1.4 } }
规范
Specification | Status | Comment |
---|---|---|
Compatibility Standard CSS Media Queries |
Living Standard | Standardizes the -webkit-device-pixel-ratio and -webkit-transform-3d media features. |
CSS Conditional Rules Module Level 3 @media |
Candidate Recommendation | Defines the basic syntax of the @media rule. |
Media Queries Level 4 @media |
Candidate Recommendation |
Added |
Media Queries @media |
Recommendation | No change. |
CSS Level 2 (Revision 1) @media |
Recommendation | Initial definition. |
浏览器支持
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support (all , print , screen ) |
1.0 | 1.0 (1.7 or earlier) | 6.0 | 9.2 | 1.3 |
speech |
未实现 | 未实现 | 未实现 | 9.2 | 未实现 |
Media features | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.2 | 1.3 |
display-mode media feature |
? | 47 (47) | ? | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support (all , print , screen ) |
1.0 | 1.0 (1.7) | (Yes) | 9.0 | 3.1 |
speech |
未实现 | 未实现 | 未实现 | 9.0 | 未实现 |
Media features | 1.0 | 1.0 (1.7) | (Yes) | 9.0 | 3.1 |
display-mode media feature |
? | (Yes) | ? | ? | ? |
相关链接
- Media queries
- The CSSOM
CSSMediaRule
associated with this at-rule.