容器查询与媒体查询的区别
了解在基于组件的设计中，何时应使用容器查询，何时应使用视口媒体查询。
容器查询与媒体查询的区别 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
根本区别
媒体查询响应视口尺寸。容器查询响应父容器尺寸。这一区别决定了针对不同问题应使用哪种工具。
何时使用媒体查询
在以下情况下使用媒体查询：
- 全局页面布局发生变化（单列或双列）
- 显示或隐藏大型页面区域（移动设备上的导航抽屉）
- 页面级排版基准缩放
- 打印样式
- 用户偏好查询（深色模式、减少动态效果）
何时使用容器查询
在以下情况下使用容器查询：
- 组件级布局发生变化（卡片从水平布局变为垂直布局，或反之）
- 组件被放置在未知容器中（侧边栏、主区域、主区域中的侧边栏）
- 可复用的设计系统组件
- 嵌入第三方页面的小部件
可移植性论证
使用媒体查询设置样式的卡片，在宽度为 1200px 的页面上会在一个断点处正常工作。如果将这张卡片移到侧边栏中，可能就需要不同的断点。使用容器查询时，同一张卡片无需调整即可工作，因为它会根据自身可用空间进行自适应。
结合使用
实际应用会同时使用两者。媒体查询定义宏观布局（在桌面宽度下显示侧边栏）；容器查询定义该布局中的组件行为。
<div class="layout">
<div class="sidebar"><div class="card">Sidebar card</div></div>
<div class="main-content"><div class="card">Main card</div></div>
</div>
容器查询的特异性
与不会增加特异性的媒体查询不同，容器查询会增加上下文特异性。@container (min-width: 400px) 内的规则与外部相同规则具有相同的特异性，但它只会在该容器上下文中生效。
浏览器支持
自 2023 年起，所有现代浏览器都支持容器查询（Chrome 105+、Firefox 110+、Safari 16+）。对于面向现代浏览器的项目，如今可以放心使用容器查询，无需提供回退方案。
使用 @supports 渐进增强
对于需要支持旧版浏览器的项目，请使用 @supports 测试容器查询是否受支持：
<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>
性能比较
容器查询具有自身的性能特征：每个设置了 container-type 的元素都会创建一个布局包含边界。这会阻止内部尺寸变化影响外部，实际上有利于性能。媒体查询的变化则可能触发全局布局重新计算。
调试容器查询
Chrome DevTools 会在“元素”面板中容器元素旁显示“cq”徽章。点击该徽章可以直观查看容器边界，并使用 DevTools 的布局检查器测试容器查询条件。
快速检查
设计系统中的卡片组件需要根据任何上下文中的可用宽度，在堆叠布局和并排布局之间切换。哪种方法更好？
回顾
媒体查询响应全局视口；容器查询响应父容器的尺寸。请使用媒体查询处理全局布局决策和用户偏好查询。请使用容器查询处理需要适应所在上下文的可复用组件。将两者结合使用：媒体查询负责页面的宏观布局，容器查询负责该布局中的组件级自适应。
用 AI 导师学习 CSS — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「容器查询与媒体查询的区别」课时是免费的吗？
是的 — 「容器查询与媒体查询的区别」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「容器查询与媒体查询的区别」这节课中我会学到什么？
了解在基于组件的设计中，何时应使用容器查询，何时应使用视口媒体查询。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「容器查询与媒体查询的区别」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。