container-queries 必须配合 container 属性才能生效，直接写 @container 无效；推荐用 container: inline-size 触发，避免 display: contents 元素设 container；grid 列数推荐用 clamp() + auto-fit 实现平滑响应；需用 @supports 检测兼容性，注意嵌套容器不冒泡且性能敏感。
container-queries 必须配合 container 属性才能生效
直接写 @container (min-width: 400px) { ... } 是无效的，浏览器根本不会解析——因为容器查询（container queries）不是全局作用域的媒体查询，它只对显式声明为容器的元素起作用。没加 container，@container 就是摆设。
实操建议：
- 给网格父容器加上
container: layout / inline-size;（推荐简写为container: inline-size;），这是触发容器查询的最低要求 - 不要用
container-name，除非你明确需要多个命名容器；默认匿名容器已足够 - 避免在
display: contents或display: none的元素上设container，它会失效 - 注意：Flex 容器或 Grid 容器本身可以设
container，但它的子项必须是“布局盒”（layout box），不能是伪元素或display: contents子节点
grid-template-columns 配合 clamp() 实现响应式列数更可靠
仅靠 @container + grid-template-columns 切换固定列数（比如 repeat(2, 1fr) → repeat(3, 1fr)）容易出现列宽突变、内容挤压或空隙错位。用 clamp() 让单列最小宽度自适应容器，比硬切列数更平滑。
常见错误现象：小屏下 repeat(3, 1fr) 导致每列窄到文字折行严重，而大屏下 repeat(2, 1fr) 又浪费空间。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 把列数逻辑交给
minmax()和clamp()：grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 100% - 2rem, 320px), 1fr)) -
auto-fit比auto-fill更实用——它会合并空轨道，避免生成无内容的列 - 如果必须精确控制列数（如“≥500px 显示 3 列，否则 2 列”），仍需
@container，但列宽建议保留弹性：repeat(3, minmax(200px, 1fr)) - 别忘了加
gap，否则clamp()在窄容器里可能让间隙撑爆布局
Chrome 110+ 才真正支持 container queries 的完整语法
Firefox 当前（v126）仅支持 @container 基础语法，不支持 size、inline-size 等维度限定；Safari 16.4+ 支持但存在 container-type 解析 bug，比如 container: size 会被忽略。
使用场景：如果你的项目需兼容 Safari 16.3 或 Firefox，@container 不能作为唯一方案。
实操建议：
- 用
@supports (container-type: inline-size)做特性检测，降级回@media - 不要混用
container-type: size和container-type: inline-size—— 后者只监听宽度，前者监听宽高，但多数网格只需宽度 - 构建时可通过 PostCSS 插件（如
postcss-container-queries）自动补@media回退，但注意它不处理clamp()或minmax()的兼容性 - 测试时务必在真实容器尺寸下检查（比如用
resize拖拽父容器），而非单纯缩放视口
嵌套容器中 container queries 不会冒泡
一个常见误解是：子容器的 @container 会继承父容器的查询上下文。实际上，每个 container 是独立作用域，子容器必须自己声明 container，且其 @container 规则只响应自身尺寸变化。
性能影响：多层嵌套容器 + 多个 @container 规则，可能触发频繁重排，尤其当容器内有动画或滚动时。
实操建议：
- 避免三层以上容器嵌套查询；优先把网格逻辑收束到最外层容器
- 如果子组件需要基于父容器宽度调整，用 CSS 自定义属性传值（如
--grid-width: 100%），比嵌套容器更轻量 - 用
getComputedStyle(el).getPropertyValue('container')调试时确认容器是否被正确识别 - DevTools 的 Layout 面板里，“Container Queries”标签页可查看当前激活的容器规则，但仅限 Chrome
真正难的是让容器查询和 grid 协同时保持内容流自然——列数切换不该导致高度跳变，clamp() 的边界值要贴合真实内容宽度，而 container 的声明位置稍有偏差，整个查询就静默失效。
