容器查询生成

怎么用

1. 填写容器名，或留空生成匿名查询。
2. 选择 container-type。inline-size 可以按宽度查询，size 额外支持高度查询但要求容器有确定高度。
3. 设置第一个条件，例如 min-width 400px；需要第二个条件时勾选启用。
4. 选择关系：and 要求两者都满足，or 满足其一即可，not 只对第一个条件取反。
5. 复制 CSS。第一块在包裹层声明容器，第二块放你的组件规则。

常见用法

• 组件级布局 —— 让卡片根据自身所在槽位的宽度在堆叠与横向之间切换。
• 可复用小组件 —— 按分到的空间而不是视口宽度来设置样式。
• 感知侧栏的内容 —— 当所在列变窄时调整列表排布。
• 学习容器查询语法 —— 先看清声明与查询的对应关系，再手写。

常见问题

问：加了 container-type 却没效果，为什么？ 答：容器查询只在声明了该容器的后代元素上生效。请确认你要设置样式的元素位于带 container-type 的包裹层内部，而不是树的另一个分支里。

问：什么时候该用 size 而不是 inline-size？ 答：按宽度查询用 inline-size，这是最常见的情况。只有当容器的高度不依赖内容时才用 size，否则高度查询可能基于自动高度计算，结果与预期不一致。

问：容器查询能检测视口吗？ 答：不能。容器查询测量的是最近的、带有匹配 container-type 的祖先容器。想对视口作出反应，请改用媒体查询。