媒体查询与响应式设计 - CSS 教程

讲解

响应式设计（Responsive Design）让同一套页面适配手机、平板、桌面。它的 CSS 武器是媒体查询：@media (条件) { ... }，条件成立时花括号里的规则才生效。最常用的条件是视口宽度：@media (min-width: 768px) 表示视口至少 768px 宽时生效。现代写法还支持区间语法 @media (width >= 768px)，以及组合条件 @media (min-width: 768px) and (max-width: 1023px)。

业界主流方法论是「移动优先」（Mobile First）：默认样式写给手机（单列、大点击区），再用 min-width 媒体查询逐级「增强」到平板和桌面。这样小屏代码最简单、大屏只是增量覆盖，比桌面优先（写 max-width 逐级删减）更顺。断点没有标准答案，常见约定是 640 / 768 / 1024 / 1280px 这一族（Tailwind 的断点即如此），但更好的原则是以内容为准——慢慢拖窄浏览器，布局在哪里「破相」就在哪里设断点。

媒体特性远不止宽度：prefers-color-scheme: dark 跟随系统深色模式、prefers-reduced-motion: reduce 尊重用户的「减弱动态效果」设置（动画章节的必备兜底）、hover: none 识别触摸设备（去掉依赖悬停的交互）、orientation: landscape 判断横竖屏。还有两个前提别忘：HTML 里必须有，否则手机浏览器会按 980px 假想宽度渲染再整体缩放，媒体查询全部失灵。比媒体查询更新的「容器查询」（@container）按组件所在容器的尺寸而非视口响应，2023 年起主流浏览器已支持，组件库场景值得关注。

示例

<!-- 响应式的前提：viewport meta，放在 head 里 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

/* 移动优先：默认是手机单栏 */
.article-list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* 平板：两栏 */
@media (min-width: 640px) {
  .article-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* 桌面：三栏 + 更大间距 */
@media (min-width: 1024px) {
  .article-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* 深色模式与减弱动效 */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1b1e;
    color: #e9ecef;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

常见坑

忘了 viewport meta：手机上媒体查询不生效、页面被整体缩放，这是响应式调试的第一检查项。
max-width 断点重叠：@media (max-width: 768px) 和 (min-width: 768px) 在恰好 768px 时同时命中，样式互相覆盖看运气。移动优先 + 只用 min-width 可以根治。
断点越加越多：为每种设备设断点会失控。以内容破相处为准，通常 2～3 个断点足够。
只在真机宽度上测试：Chrome DevTools 的设备模拟器能覆盖绝大多数场景；另外别忘测试 200%、400% 缩放（等价于窄视口，无障碍要求）。
悬停交互在触屏上失效：:hover 菜单在手机上点不出来，关键交互要有点击路径，并用 @media (hover: hover) 包裹纯悬停增强。

小结

媒体查询按条件应用样式；移动优先 + min-width 逐级增强；断点以内容为准；viewport meta 是前提；关注 dark、reduced-motion、hover 等用户偏好媒体特性。下一章给页面加上动效：过渡。