CSS 响应式：@media 媒体查询

响应式设计的核心在于让网页能够根据用户的设备特征（主要是屏幕宽度）自动调整布局。CSS 的 @media 规则是实现这一功能的基石，它允许你针对不同的屏幕尺寸编写特定的 CSS 样式。

1. 理解媒体查询的基本语法

媒体查询由一个可选的媒体类型和若干个媒体特性表达式组成。如果条件满足，大括号内的代码就会生效。

编写 最基础的媒体查询结构：

@media screen and (min-width: 768px) {
  /* 当屏幕宽度大于等于 768px 时执行 */
  body {
    background-color: lightblue;
  }
}

上述代码的含义是：如果设备是 screen（屏幕），并且 min-width（最小宽度）至少为 768px，则将背景色设置为浅蓝色。

了解 逻辑操作符：

• and：所有条件都必须满足。
• ,（逗号）：相当于逻辑“或”，只要满足其中一个条件即可。
• not：否定整个查询条件。
• only：防止不支持媒体查询的旧浏览器应用样式。

2. 确定常用断点

为了兼容不同设备，通常需要设定几个关键的宽度分界点。以下是一套标准的断点参考，涵盖了从手机到大屏显示器的场景。

3. 采用“移动优先”策略

移动优先意味着先为小屏幕编写默认样式，然后通过 min-width 逐步增强大屏幕的体验。这种方式代码量更少，加载速度更快。

建立 基础 HTML 结构：

<div class="container">
  <div class="box">项目 1</div>
  <div class="box">项目 2</div>
  <div class="box">项目 3</div>
</div>

编写 默认（手机端）CSS 样式，此时内容垂直排列：

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.box {
  padding: 20px;
  background-color: #f4f4f4;
  border: 1px solid #ccc;
}

添加 媒体查询，使平板及以上设备显示为两列：

/* 当屏幕宽度至少为 768px 时 */
@media (min-width: 768px) {
  .box {
    width: calc(50% - 5px); /* 计算宽度：50% 减去间隙的一半 */
  }
}

继续 添加媒体查询，使桌面端显示为三列：

/* 当屏幕宽度至少为 992px 时 */
@media (min-width: 992px) {
  .box {
    width: calc(33.333% - 6.66px); /* 三列布局宽度计算 */
  }
}

4. 处理复杂逻辑流程

在实际开发中，可能需要同时判断宽度和方向（横屏/竖屏）。当逻辑较为复杂时，可以使用以下流程图来理清 CSS 的匹配顺序。

根据上述逻辑，实现 一个同时限制宽度与横屏的查询：

@media screen and (min-width: 768px) and (orientation: landscape) {
  body {
    font-size: 18px; /* 平板横屏时增大字体 */
  }
}

5. 针对特定设备的优化

除了宽度，还可以针对打印或其他特性进行优化。

隐藏 打印时不必要的元素：

@media print {
  .no-print {
    display: none;
  }
}

调整 高分辨率屏幕（如 Retina 屏）的图片清晰度：

/* 设备像素比大于等于 2 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 100px 50px;
  }
}

6. 调试与验证

完成代码编写后，必须在不同尺寸下验证效果。

打开 浏览器的开发者工具（通常按 F12 键）。

点击 开发者工具左上角的“设备切换图标”（或按 Ctrl + Shift + M）。

选择 顶部预设的设备型号（如 iPhone 12 Pro, iPad Pro），或在顶部输入框拖动滑块自定义宽度。

观察 页面布局是否在 576px、768px、992px 和 1200px 这些节点按预期发生变化。如果布局没有在预期位置切换，检查 CSS 中的断点数值是否与 HTML 元素实际占据的空间匹配（注意 box-sizing 和 margin 的影响）。