@media

语法：

@media：<media_query_list>

<media_query_list>：[<media_query>[, <media_query>]*]?

<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>：(<media_feature>[:<value>]?)

取值：

<media_type>：
指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)
<expression>：
指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width: 960px。(CSS3)

说明：

指定样式表规则用于指定的媒体类型和查询条件。
  • IE8及以下只能实现 CSS2 中的部分，即只可以设置媒体类型。

  • 媒体查询可以被用在 CSS 中的 @media 和 @import 规则上，也可以被用在 HTML 和 XML 中。

    示例代码：

    @media screen and (width: 800px){ … } @import url(example.css) screen and (width: 800px); <link media="screen and (width: 800px)" rel="stylesheet" href="example.css" /> <?xml-stylesheet media="screen and (width: 800px)" rel="stylesheet" href="example.css" ?>

    列举几种使用方式：

    @media all and (width: 1024px) { body { color: #f00; } } @media all and (device-height: 800px){ … } @media all and (orientation: landscape){ … } @media all and (device-aspect-ratio: 16/10){ … } @media all and (min-color: 1){ … } @media all and (monochrome: 0){ … } @media all and (grid: 0){ … }

兼容性(指定媒体类型)：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
  • 橙色 = 通过第三方工具支持
IE Edge Firefox Chrome Safari Opera iOS
Safari		 Android
Browser		 Blackberry
Browser		 Opera
Mobile		 Chrome
for
Android		 Firefox
for
Android		 IE
Mobile		 UC
Browser
for
Android		 Samsung
Internet		 QQ
Browser		 Baidu
Browser
5.5-8 12+ 2-3 4-25 #1 3.1-3.2 #1 9 3.2-6.1 #1 2.1-4.3 #1 7+ 10+ 61 56 10-11 #1 11.4 4+ 1.2 7.12
9-11 #1 3.5+ 26+ 4-6 #1 9.5+ 7.0+ 4.4+
6.1+
  1. 通过selectivizr，IE6+也可支持。本页下方的示例已使用此方案。

示例：