0Pricing
CSS Academy · 课时

容器查询单位：cqw 与 cqh

使用 cqw、cqh 及其他相关容器单位，让元素相对于其查询容器调整尺寸。

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

容器查询单位

CSS 提供了相对于容器的单位，可以将值设置为查询容器尺寸的百分比，类似于视口单位（vw/vh），但它们相对于组件的容器。

cqw — 容器查询宽度

1cqw = 容器内联尺寸的 1%（横向书写时即为宽度）。相对于组件容器缩放排版和间距。

<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>

cqh — 容器查询高度

1cqh = 容器块尺寸的 1%（即高度）。需要 container-type: size，而不只是 inline-size。

<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>

cqi — 容器内联尺寸

在横向书写中，cqi 是 cqw 的别名，表示内联维度，具体取决于内联方向，而不是固定与水平方向关联。

cqb — 容器块尺寸

cqb 类似于 cqh，但它相对于维度，表示与书写模式无关的块尺寸。

cqmin 和 cqmax

cqmin = 容器较小维度的 1%。cqmax = 容器较大维度的 1%。它们类似于 vmin/vmax。

<div class="icon-wrapper"><div class="icon"></div></div>

组件中的流式排版

容器单位可以实现真正限定在组件范围内的流式排版：

<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>

何时使用容器单位

在以下情况下使用容器单位：

  • 组件中的文本应随组件宽度缩放
  • 组件内部的间距应与其尺寸成比例
  • 希望实现独立于视口的组件级流式设计

容器单位与视口单位

关键区别在于：视口单位（vw、vh）引用浏览器视口；容器单位（cqw、cqh）引用最近的查询容器。因此组件真正具备可移植性：同一个组件在 300px 宽的侧边栏和 900px 宽的主区域中都能保持正确的比例。

必需：container-type

容器单位只有在存在设置了 container-type 的祖先元素时才会生效。如果没有这样的祖先元素，容器查询单位会回退到小视口单位（svw/svh）。

实用模式

一个完整使用容器单位的组件：

<div class="feature">
  <h2 class="feature-title">Feature Name</h2>
  <p class="feature-text">A short description of this feature that scales with the container.</p>
</div>

快速检查

在一个宽度为 400px 的容器内的组件中，font-size: 5cqw 会产生什么结果？

回顾

容器查询单位（cqw、cqh、cqi、cqb、cqmin、cqmax）会相对于查询容器而不是视口设置值的尺寸。使用 cqw 实现随组件宽度缩放的流式排版。它们需要一个设置了 container-type 的祖先元素才能生效；如果没有这样的祖先元素，就会回退到视口单位。

常见问题解答

「容器查询单位：cqw 与 cqh」课时是免费的吗？

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

「容器查询单位：cqw 与 cqh」这节课中我会学到什么？

使用 cqw、cqh 及其他相关容器单位，让元素相对于其查询容器调整尺寸。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

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

「容器查询单位：cqw 与 cqh」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. container-type 与 container-name
  2. @container 规则与断点
  3. 容器查询单位：cqw 与 cqh
  4. 容器查询与媒体查询的区别
← 返回 CSS Academy