所有主流浏览器已原生支持CSS容器查询，但必须显式设置container-type才能生效；container-type: inline-size适用于95%场景，而Flex/Grid父容器上直接设置无效，需额外包裹一层并设container-type。
所有主流浏览器（Chrome 110+、Firefox 119+、Safari 16.4+）已原生支持 CSS 容器查询，@container 规则可直接使用，无需前缀或 polyfill。
容器查询真正生效的前提：必须显式设置 container-type
很多开发者写了 @container 却没效果，根本原因不是兼容性问题，而是漏了这一步——container-type 不是可选项，是硬性开关。
-
container-type: inline-size是 95% 场景的首选，只监听容器内联方向（通常是宽度），开销最小 -
container-type: size同时监听宽高，会触发额外布局计算，仅在需要响应高度变化时才用（比如全屏轮播组件） -
container-type: normal或未声明 = 容器查询完全关闭，@container规则被浏览器忽略 -
container-name只是标识符，不启用查询能力；命名容器需配合@container name (condition)使用
Flex/Grid 父容器上直接设 container-type 为什么无效？
因为 Flex 和 Grid 的子项尺寸由算法动态分配，没有稳定可测量的“自身宽度”，浏览器查不到值。这不是 bug，是规范行为。
- 正确做法：在 Flex/Grid 的直接子元素外再包一层
<div class="wrapper">，把container-type: inline-size加在 wrapper 上 - 如果 wrapper 是 flex item，记得加
min-width: 0或width: fit-content，否则父级 flex 可能把它压缩到 0 -
gap不计入inline-size计算，但padding和border会计入，建议统一用box-sizing: border-box
@container 中能用哪些单位？哪些不能用？
容器查询有自己的单位体系，且限制比媒体查询更严格——它不信任相对单位在嵌套上下文中的稳定性。
立即学习“前端免费学习笔记（深入）”；
- 允许：绝对单位
px、容器单位cqw/cqh/cqi/cqb/cqmin/cqmax - 禁止：
em、rem、%（除非父容器宽度确定）、vw（需容器有明确 width 才可靠） - 推荐统一用
px写断点，配合clamp(14px, 4cqi, 24px)做字体缩放，比视口单位更精准
最常被忽略的一点：容器查询不是“媒体查询的平替”，它是组件级响应式的基础设施——你得先让组件有“自己的容器”，再让它“感知容器”，最后才谈得上“响应”。缺任何一环，@container 都只是死代码。
