@media

概述

@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" />

语法

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

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

媒体类型

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

all

适用于所有设备。

print

为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。

screen

主要适用于彩色的电脑屏幕

speech

解析speech这个合成器. 注意: CSS2已经有一个相似的媒体类型叫aural.可以看以下附录

媒体特性

针对每个浏览器和不同设备都有各自的媒体特性

示例

@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 }
}

规范

浏览器支持

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!

相关链接

• Media queries
• The CSSOM CSSMediaRule associated with this at-rule.