语法

媒体查询包括一个媒体类型和至少一个媒体属性, 这些媒体属性会被解析成真或假.

当媒体查询为真时, 相关的样式表或样式规则就会按照正常的级联规则被应用.

即使媒体查询的结果为假, <link>标签上带有媒体查询的样式表仍然会被下载.

逻辑操作符

操作符 not, and 和 only, 可以用来构建复杂的媒体查询

逗号分隔符相当于 or 操作符, 其中一个为真, 则媒体查询结果为真

一个基本的媒体查询, 即一个媒体属性与默认指定的 all 媒体类型, 可能是这样子:

@media (min-width: 700px) {...}
`</pre>

如果要添加横屏限制

<pre>`@media (min-width: 700px) and (orientation: landscape) {...}
`</pre>

### not

not 关键字应用于整个媒体查询, 如

<pre>`@media not all and (monochrome){...} 等价于
@media not (all and (monochrome)) {...}
`</pre>

在逗号媒体查询列表中, not 仅否定他所在的 item.

## 媒体属性

大多数媒体属性都带有" min-" 和" max-"前缀

### Color

  • 值: &lt;color&gt;

  • 媒体: visual

  • 是否接受 min/max 前缀: 是

    示例

    向所有能显示颜色的设备应用样式表

    `@media all and (color) {...}
`

    Aspect-ratio

  • 值: &lt;ratio&gt;

  • 媒体: visual, tactile

  • 是否接受 min/max 前缀: 是

    宽高比以”宽/高”表示

    示例

    向显示区域宽高比至少 1:1 的设备应用样式表

    `@media screen and (min-aspect-ratio: 1/1){...}
`

    Device-aspect-ratio

  • 值: &lt;ratio&gt;

  • 媒体: visual, tactile

  • 是否接受 min/max 前缀: 是

    示例

    为宽屏设备应用样式表

    `@media screen and (device-aspect-ratio:16/9), screen and (device-aspect-ratio:16/10){...}
`

    Device-height

  • 值: &lt;length&gt;

  • 媒体: visual, tactile

  • 是否接受 min/max 前缀: 是

    描述输出设备的高度(整个屏幕或页的高度, 而不是渲染窗口的高度)

    实例

    向显示在最大宽度 800px 的屏幕上的文档应用样式表

    `<link rel="stylesheet" media="screen and (max-device-height: 799px)" />

Device-width

  • 值: &lt;length&gt;
  • 媒体: visual, tactile
  • 是否接受 min/max 前缀: 是

描述输出设备的宽度

Grid

  • 值: &lt;integer&gt;
  • 媒体: all
  • 是否接受 min/max 前缀: 否
  • 判断输出设备是网格设备还是位图设备. 如果是网格设备(例如电传打字机中断或只能显示一种字形的电话), 该值为 1, 否则为 0

Height

  • 值: &lt;length&gt;
  • 媒体: visual, tactile
  • 是否接受 min/max 前缀: 是

height 描述输出设备的渲染区域高度

Monochrome

Orientation

  • 值: &lt;landscape | portrait&gt;
  • 媒体: visual
  • 是否接受 min/max 前缀: 否