这篇翻译不完整。请帮忙从英语翻译这篇文章

 

概述

@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@规则由一个或多个媒体查询组成,每个媒体查询包含一个可选的媒体类型和若干媒体特性。多个查询可通过使用逻辑运算符以多种方式组合起来,且对大小写敏感。

仅当媒体查询计算为真时,即,当指定的媒体类型与正在显示文档的设备的类型匹配并且所有媒体特征表达式计算为真时,才应用相应的样式。涉及未知媒体类型的查询总是错误的。

注:即使查询返回false,附有媒体查询的样式表仍然会下载<link> 标签。但是,直到其查询结果变为真,否则其内容将不适用。

媒体类型

媒体类型描述设备的一般类别。除非您使用notonly逻辑运算符,否则媒体类型是可选的,并且将隐含使用all类型。

all
适用于所有设备。
print
为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media(媒体屏幕尺寸), 以满足个别设备网页尺寸不匹配等问题。
screen
主要适用于彩色的电脑屏幕
speech
解析speech这个合成器. 注意: CSS2已经有一个相似的媒体类型叫aural.可以看以下附录
废弃的媒体类型:CSS2.1和媒体查询3定义了几种额外的美图类型,(ttytvprojectionhandheldbrailleembossed, 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 transforms supported? Nonstandard; WebKit/Blink-specific
-webkit-transform-2d Are CSS 2D transforms supported? Nonstandard; WebKit-specific
-webkit-transition Are CSS transitions supported? Nonstandard; WebKit-specific
-webkit-animation Are CSS animations 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 scripting, pointer, hover, light-level, update-frequency, overflow-block, and overflow-inline media features.
Deprecated all media types except for screen, print, speech, and all.

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) ? ? ?

相关链接

文档标签和贡献者

标签: 
 最后编辑者: 1060881984,