Media Query 意为媒体查询。

它可以用来根据设备类型来实现样式兼容或其他自定义配置。

我们在开发中更多利用其实现响应式布局。

13-1.Media Type

Media Type 意为媒体类型。

有以下四种选项：

1. all 适用于所有类型。
2. print 适用于打印机和打印预览。
3. screen 适用于电脑屏幕、平板电脑、智能手机等。
4. speech 适用于屏幕阅读器。

13-2.Media Feature

Media Feature 意为媒体特性。

我们在响应式布局中常用的有以下：

• min-width 定义输出设备中的页面最小可见区域宽度。
• max-width 定义输出设备中的页面最大可见区域宽度。
• min-height 定义输出设备中的页面最小可见区域高度。
• max-height 定义输出设备中的页面最大可见区域高度。

更多特性可见这篇文章

13-3.Media Query

媒体查询的基本语法为：

@media type and (feature) and (feature) {
  ...
}

譬如：

/* 正常样式 */
.container {
  background-color: darkorange;
}
/* 媒体查询样式 */
@media screen and (max-width: 768px) and (min-width: 400px) {
  .container {
    background-color: dodgerblue;
  }
}

TIP

媒体查询样式必须写在正常样式的下方，才会起作用。