容器查询生效需同时设置 container-type 和 contain: size，否则不触发；尺寸不稳定、布局破坏或单位不支持是常见失效原因。
容器查询不是“写了就能用”的功能，它必须配合显式容器声明和尺寸稳定性控制才能生效。
container-type 和 contain 必须同时设置
只写 @container 规则，浏览器根本不会触发任何查询。关键动作是给父容器加两个 CSS 声明：
-
container-type: inline-size（最常用）或block-size，明确告诉浏览器“我按哪个方向提供尺寸上下文” -
contain: size—— 这是最低要求，缺一不可；contain: content不行，它不隔离尺寸计算 - 推荐写法：
contain: layout style size，避免子元素撑破容器导致尺寸误判
容器尺寸不稳定是“查询不触发”的最大原因
很多开发者写了 @container (min-width: 400px) 却没反应，实际是容器宽度根本测不出来。常见陷阱包括：
- Flex 子项默认有
min-width: auto，会阻止收缩 → 加min-width: 0或width: fit-content - 容器宽高来自
flex: 1或grid-column: 1 / -1，但父级没设尺寸 → 浏览器无法确定“可查询的尺寸” - 用了
float、position: absolute或display: inline→ 破坏布局上下文，container-type静默失效
@container 不能嵌套，也不支持所有单位
@container 是独立规则，不能写在 @media 块里，反过来也不行。它的单位限制比媒体查询更严格：
- 只支持
px、vw、%（截至 2026 年 5 月 1 日，rem、em、ch均不支持） - 不支持
max-width单独使用，必须搭配min-width或写成(width > 400px)形式 - 命名容器（
container-name）可读性好，但非必需；未命名时直接用@container即可匹配最近的合格容器
DOM 状态要靠 class 或自定义属性联动
@container 本身不感知 JS 状态，但你可以把状态“挂”到容器上，再组合查询：
- React/Vue 中动态加类：
<div class="card-container is-collapsed">，然后写 <code>@container (inline-size > 320px) { .card-container.is-collapsed .card { display: none; } } - 用自定义属性驱动：
<div class="card-container" style="--mode: 'detail'">，再配合 <code>@container (inline-size > 480px) { .card-container[style*='detail'] { ... } } - 注意：属性选择器匹配的是字符串，
style属性值变化时需确保格式稳定，否则查询条件失效
真正难的不是语法，而是让容器“可测”——它要求你对 Flex/Grid 的尺寸传播机制、contain 的隔离边界、以及 DOM 结构约束有清晰判断。一个没加 contain: size 的容器，哪怕尺寸再稳定，@container 也永远不工作。
