CSS 媒体查询

媒体查询 (Media Queries) 是响应式网页设计 (Responsive Web Design, RWD) 的核心技术。它允许你根据设备的特定特征（如视口宽度、屏幕分辨率、方向等）来应用不同的 CSS 样式。

通过使用媒体查询，你可以为手机、平板、笔记本电脑和桌面显示器等各种设备创建定制的布局和样式，从而提供最佳的用户体验。

语法

一个媒体查询由一个可选的媒体类型和任意数量的媒体特性表达式组成。

@media [media-type] and ([media-feature-rule]) {
  /* CSS 规则写在这里 */
}

• @media: 开启一个媒体查询块。
• media-type (可选): 指定设备类型。常见的有：
  • all: (默认) 适用于所有设备。
  • print: 适用于打印机或打印预览模式。
  • screen: 适用于彩色电脑屏幕。
• and: 逻辑操作符，用于连接多个媒体特性。
• [media-feature-rule]: 媒体特性规则，是媒体查询的核心。它是一个描述设备或环境特征的条件。

常用的媒体特性

视口宽度

这是最常用的媒体特性，用于根据浏览器视口的宽度应用样式。

• min-width: 当视口宽度 大于或等于 指定值时，应用样式。这常用于“移动优先”的设计方法。
• max-width: 当视口宽度 小于或等于 指定值时，应用样式。这常用于“桌面优先”的设计方法。

示例（移动优先）:

/* 默认样式（适用于所有设备，特别是小屏幕） */
.container {
  width: 100%;
  padding: 15px;
}

/* 当屏幕宽度至少为 768px 时（平板及以上） */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* 当屏幕宽度至少为 992px 时（桌面） */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

视口高度 (min-height, max-height)

根据视口的高度应用样式，不常用，但在某些特定布局中很有用。

方向 (orientation)

根据设备是处于纵向模式还是横向模式来应用样式。

• orientation: portrait: 纵向（高度大于或等于宽度）。
• orientation: landscape: 横向（宽度大于高度）。

@media (orientation: landscape) {
  /* 在横向模式下应用这些样式 */
}

悬停能力 (hover)

检测用户的主要输入设备是否支持悬停操作。

• hover: hover: 主要输入设备可以方便地悬停，如鼠标。
• hover: none: 主要输入设备无法悬停，如触摸屏。

这对于避免在触摸设备上应用仅依赖 :hover 的交互样式非常有用。

/* 只在支持悬停的设备上应用发光效果 */
@media (hover: hover) {
  .button:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
  }
}

复杂的媒体查询

你可以使用逻辑操作符来创建更复杂的查询：

• and: 连接多个条件，必须全部满足。
• , (逗号): 相当于 or，只要满足其中一个查询即可。
• not: 对整个媒体查询取反。

/* 当屏幕宽度在 600px 和 900px 之间时 */
@media (min-width: 600px) and (max-width: 900px) {
  /* ... */
}

/* 当设备是彩色屏幕或打印机时 */
@media screen, print {
  /* ... */
}

媒体查询是构建现代、适应性强网站的基石。