0Pricing
Frontend Academy · 课时

媒体查询与移动优先开发

使用 min-width 媒体查询编写断点，先构建移动端布局，再逐步增强大屏幕布局。

媒体查询与移动优先开发 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是媒体查询

媒体查询只会在特定条件成立时应用 CSS 规则，例如视口宽度超过某个阈值。它是响应式设计的基础，让同一个样式表能够适应各种屏幕尺寸。

基本语法

媒体查询会将一组 CSS 包裹在 @media 规则中。只有条件匹配时，内部规则才会生效。

@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

min-width 与 max-width

min-width：当视口至少达到此宽度时应用样式（移动优先）。max-width：当视口最多达到此宽度时应用样式（桌面优先）。移动优先开发更推荐使用 min-width。

/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }

/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }

移动优先方法

先为小屏幕编写 CSS（放在任何媒体查询之外）。然后使用 min-width 媒体查询，逐步为更大的屏幕增加复杂布局。这样可以为移动用户生成更小的 CSS，并使整体代码更整洁。

.card {
  /* Mobile defaults: single column */
  padding: 16px;
  font-size: 0.9rem;
}

@media (min-width: 768px) {
  .card {
    /* Tablet enhancement */
    padding: 24px;
    font-size: 1rem;
  }
}

常见断点

请根据内容选择断点，而不是根据特定设备选择。常见的起始值包括：480px（大型手机）、768px（平板电脑）、1024px（小型桌面设备）、1280px（大型桌面设备）。请避免针对特定设备型号设置断点。

媒体类型

除了屏幕宽度之外，您还可以针对媒体类型：screen 用于显示器，print 用于打印机。打印媒体查询可以自定义页面打印时的外观（隐藏导航、调整颜色）。

@media print {
  nav, footer, .ads {
    display: none;
  }
  body {
    font-size: 12pt;
    color: black;
  }
}

使用 and 组合条件

使用 and 链接多个条件：仅当两个条件都为真时才应用样式。使用 not 和 or 可以实现更复杂的逻辑。

@media (min-width: 768px) and (max-width: 1023px) {
  /* tablets only */
}

@media (orientation: landscape) and (max-width: 767px) {
  /* landscape phones */
}

prefers-color-scheme

响应用户对 OS 深色模式的偏好。默认情况下提供深色主题，无需切换开关。

@media (prefers-color-scheme: dark) {
  body {
    background: #1a202c;
    color: #f7fafc;
  }
}

prefers-reduced-motion

尊重偏好较少动效的用户（例如患有前庭障碍或癫痫的用户）。在此媒体查询中禁用或简化动画。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

容器查询——未来方向

容器查询（@container）根据父容器的大小而不是视口大小应用样式。它支持真正的组件级响应式设计，自 2023 年起已在所有现代浏览器中可用。

.card-container {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

用于 RTL 支持的逻辑属性

对于同时适用于从左到右和从右到左语言的布局，请使用 margin-inline-start 等逻辑属性，而不是 margin-left。让您的响应式布局面向未来。

快速检查

哪种方法正确地定义了移动端优先的 CSS 策略？

总结：媒体查询与移动端优先

使用 @media (min-width: N) 实现移动端优先的渐进增强。无需查询即可为移动端编写基础样式。为更大屏幕添加复杂性。使用 prefers-color-scheme 实现深色模式。使用 prefers-reduced-motion 提升无障碍性。使用容器查询实现组件级响应式设计。

常见问题解答

「媒体查询与移动优先开发」课时是免费的吗？

是的 — 「媒体查询与移动优先开发」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「媒体查询与移动优先开发」这节课中我会学到什么？

使用 min-width 媒体查询编写断点，先构建移动端布局，再逐步增强大屏幕布局。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「媒体查询与移动优先开发」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 视口元标签
  2. 使用 Flexbox 进行布局
  3. 使用 CSS Grid 进行布局
  4. 媒体查询与移动优先开发
← 返回 Frontend Academy