Media queries

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

• 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
• 一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试；
• 一组 CSS 规则，会在测试通过且媒体类型正确的时候应用。

媒体类型

• all
• print
• screen
• speech

@media screen and (min-width: 600px) {
  body {
    color: red;
  }
}

朝向

一个受到良好支持的媒体特征是orientation，我们可以用它测得移动设备竖放（portrait mode）和横放（landscape mode）模式。

@media (orientation: landscape) {
  body {
    color: rebeccapurple;
  }
}

使用指点设备

@media (hover: hover) {
  body {
    color: rebeccapurple;
  }
}

还有pointer媒体特征。有三个值：none, fine和coarse。

• fine鼠标，触控板，精确
• coarse移动设备触摸屏上你的手指，模糊
• none没有指点设备，可能在用键盘导航，或是语音命令

更复杂媒体查询

"与""或""非"

@media screen and (min-width: 400px) and (orientation: landscape) {
  body {
    color: blue;
  }
}

@media screen and (min-width: 400px), screen and (orientation: landscape) {
  body {
    color: blue;
  }
}

非not可以反转整个媒体查询，比如下面会在朝向为竖着的时候变成蓝色。

@media not all and (orientation: landscape) {
  body {
    color: blue;
  }
}

主动学习：移动优先的响应式设计

详情看MDN。