媒体查询

媒体查询是 CSS 的一项功能，可让 网页内容适应不同的屏幕尺寸和分辨率。它们是 响应式网页设计 的重要组成部分，可用于针对多种设备自定义网站的外观。

媒体查询可以插入网页的 HTML 中，也可以包含在网页引用的单独 .CSS 文件中。下面是一个简单媒体查询的示例：

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

如果用户的 浏览器窗口宽度为 768 像素或更小，上面的媒体查询就会生效。如果你在台式计算机上缩小窗口，或者使用 平板电脑等移动设备查看网页，就可能出现这种情况。

在响应式网页设计中，媒体查询充当不同屏幕尺寸的过滤器。与层叠样式表中的所有模块一样，列表中后出现的模块会覆盖前面的模块。因此，默认样式通常会在 CSS 文档中首先定义，随后定义适用于不同屏幕尺寸的媒体查询。例如，可以先定义桌面样式，然后定义一个适用于平板电脑用户的媒体查询，再定义一个面向 智能手机用户的媒体查询。也可以按相反的顺序定义样式，这种开发方式称为“移动优先”。

虽然 min-width 是媒体查询中最常用的功能，但还有许多其他功能可用。其中包括 min-device-width、min-device-height、aspect-ratio、max-color-index、max-resolution、orientation 和 resolution。例如，可以使用 resolution 值检测 HiDPI 显示屏例如 (Retina 显示屏），并加载高分辨率图形，而不是标准图像。