RWD 媒体查询

响应式网页设计 - 媒体查询

什么是媒体查询？

媒体查询 (Media Queries) 是响应式网页设计 (Responsive Web Design, RWD) 的核心特性。它们允许你根据设备或视口 (viewport) 的特性，如宽度、高度、方向或分辨率，有条件地应用 CSS 规则。

它们使用 @media 规则来包含 CSS 代码块，这些代码块仅在指定的条件为真时应用。

基本语法：

@media media-type and (media-feature: value) {
  /* 条件满足时应用的 CSS 规则 */
  selector {
    property: value;
  }
}

示例：在小屏幕（最大宽度 600px）上改变背景颜色。

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

实现断点

断点 (breakpoint) 是指网页布局或样式发生改变，以适应不同屏幕尺寸的点（通常是特定的视口宽度）。

媒体查询用于定义这些断点。例如，你可能希望桌面端是多列布局，而在移动端则堆叠成单列。

常见做法：首先定义基本样式，然后使用 min-width 媒体查询为更大的屏幕添加复杂性（移动优先 Mobile First 方法）。

[设想一个布局：在桌面端是 3 列并排，在移动端则垂直堆叠]

示例：一个带断点的简单列布局

/* 默认（移动端）样式：单列 */
.column {
  width: 100%;
  margin-bottom: 1em;
  background-color: lightgray; /* 仅为便于查看 */
  padding: 1em;
}

/* 平板及更大屏幕 (min-width: 768px) */
@media screen and (min-width: 768px) {
  .row {
    display: flex; /* 使用 Flexbox 实现列 */
    gap: 1em; /* 列之间的间距 */
  }

  .column {
    flex: 1; /* 让列平均分配空间 */
    margin-bottom: 0; /* 并排时移除底部外边距 */
  }
}

在此示例中，列默认是全宽的。当屏幕宽度达到或超过 768px 时，@media 规则生效，使用 Flexbox 将列并排排列。

移动优先设计原则

“移动优先”（Mobile First）设计意味着从最小屏幕（移动端）的基础 CSS 开始，然后使用 min-width 媒体查询为更大的屏幕添加复杂性。

优点：

性能：移动设备首先下载更简洁、更基础的样式。
渐进增强：确保在所有设备上都能获得可用的体验，为性能更强的浏览器/更大屏幕添加功能。
代码更整洁：通常可以减少样式覆盖。

前面的列示例就遵循了移动优先的方法。

常见媒体特性

除了 width，你还可以使用多种媒体特性：

min-width / max-width：基于视口宽度。
min-height / max-height：基于视口高度。
orientation：portrait（竖屏）或 landscape（横屏）。
aspect-ratio / min-aspect-ratio / max-aspect-ratio：宽高的比例。
resolution：屏幕分辨率（例如，min-resolution: 2dppx 用于高密度显示屏）。
prefers-color-scheme：light（浅色模式）或 dark（深色模式）（用于支持深色模式）。
prefers-reduced-motion：no-preference（无偏好）或 reduce（减少动态效果）（用于可访问性）。

你可以使用 and、or（逗号分隔）和 not 组合这些特性。

示例：为平板或更大屏幕的横屏方向设置样式：

@media screen and (min-width: 768px) and (orientation: landscape) {
  /* 针对宽屏、横屏视口的特定样式 */
}

示例：支持深色模式：

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

选择断点

与其针对特定设备宽度（这些宽度不断变化），不如根据你的内容或布局何时开始显得别扭或“崩坏”来选择断点，这通常是更好的方法。

常见起始点可能在：

~600px（大屏手机 / 小平板电脑）
~768px（平板电脑）
~992px（小型桌面 / 大平板电脑）
~1200px（桌面电脑）

然而，始终根据你的具体设计需求进行调整。