Container Queries 是解决组件级响应的独立机制，需容器有明确尺寸约束；常见失效原因包括缺少布局上下文、定位方式不当或 Flex/Grid 使用错误，语法上使用 inline-size/block-size 且不支持 em/rem。
Container Queries 不是媒体查询的替代品，而是解决「组件级响应」问题的独立机制；它让容器能根据自身尺寸而非视口尺寸调整子元素样式，但必须满足容器有明确尺寸约束这个前提。
为什么 container 属性不生效？
最常见原因是容器缺少「布局上下文」：container 属性只对具有明确尺寸（width/height）或受父容器约束的块级元素起作用。浮动、绝对定位、display: inline 或未设置 contain: layout 的 flex/grid 容器都可能使 container 查询失效。
- 确保容器设置了
width、max-width或inline-size（推荐用逻辑属性） - 避免对容器同时使用
position: absolute或float - 若容器是
flex或grid项目，需确认其父容器未设flex: 1或min-width: 0导致尺寸坍缩 - 在 Chrome/Firefox 中启用实验性功能（
chrome://flags/#enable-container-queries），Safari 16.4+ 原生支持但需加-webkit-前缀
@container 查询语法与尺寸单位选择
Container Queries 使用 inline-size（主轴方向宽度）和 block-size（交叉轴方向高度）代替 width/height，这是为了适配书写模式（如 vertical-rl）。实际开发中绝大多数场景只需关注 inline-size。
- 基础写法：
@container (inline-size > 400px) { .card-title { font-size: 1.5rem; } } - 不支持
em、rem等相对单位，只能用px、vw、%（仅当容器本身有明确百分比宽时才可靠） - 可组合多个条件：
@container (inline-size > 300px) and (block-size < 200px) - 不能嵌套在
@media内部，但两者可并存——@media控制页面级断点，@container控制组件级断点
与 Flex/Grid 容器配合时的典型陷阱
Flex 和 Grid 容器默认不提供稳定的 container 查询上下文，因为它们的子项尺寸由算法动态分配。强行在 display: flex 父元素上设 container，往往查不到预期尺寸。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：把
container放在 Flex/Grid 的直接子容器上（例如卡片外层 wrapper），而不是 Flex/Grid 容器本身 - 若需对 Grid 项做响应式控制，应在每个
.grid-item内部再包一层并设container: item-container / inline - 注意
gap不计入inline-size计算，但padding和border会计入（box-sizing 影响结果） - 使用
contain: layout style size可强化容器边界，尤其在内容动态加载时防止查询错位
真正难的是让容器「稳定可测」——很多看似合理的布局，在内容变化或 JS 注入后会悄悄破坏 container 尺寸，导致查询失效。建议始终用 outline: 1px solid red 临时标记容器，肉眼确认它的实际渲染尺寸是否符合预期。
