浅谈 CSS3 新特性：多媒体查询

@media

使用 @media，可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。

在 CSS3 中，媒体查询可用于检测很多事情，例如：

viewport（视窗）的宽度与高度
设备的宽度与高度
朝向（智能手机横屏，竖屏）
分辨率

语法：

@media <media-query-list> {
  <group-rule-body>
}

<media-query-list>: not|only mediatype and (expressions)

not: 用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。
all: 所有设备。

@media 规则可置于代码的顶层或位于其它任何@条件规则组内。

/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

多媒体类型

all，用于所有多媒体类型设备。
print，用于打印机。
screen，用于电脑屏幕，平板，智能手机等。
speech，用于屏幕阅读器。

通过 JS 查询 @media

在 JavaScript 中，可以使用 CSSMediaRuleCSS 对象模型接口访问使用 @media 创建的规则。

这是我们准备的样式表：

main {
  width: 1024px;
  margin: 0 auto !important;
}

.component {
  float: right;
  border-left: solid 1px #444;
  margin-left: 20px;
}

@media (max-width: 800px) {
  body {
    line-height: 1.2;
  }

  .component {
    float: none;
    margin: 0;
  }
}

通过 document.styleSheets[0].cssRules，可以访问到所有的 CSSrule，其中 type = 4 就是 CSSMediaRule 对象。

使用 JS 创建 @media

在 JavaScript 中，可以使用 matchMedia() 方法创建媒体查询：

window.matchMedia(mediaQueryString);

mediaQueryString: 必需，一个被用于媒体查询解析的字符串。

matchMedia() 方法返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。MediaQueryList 对象有以下两个属性：

media：查询语句的内容。
matches：用于检测查询结果，如果文档匹配 media query 列表，值为 true，否则为 false。

if (window.matchMedia("(max-width: 700px)").matches) {
  /* 窗口小于或等于 700 像素 */
  document.body.style.backgroundColor = "yellow";
} else {
  /*窗口大于 700 像素 */
  document.body.style.backgroundColor = "pink";
}