容器查询失效的根本原因是父容器未声明container-type，必须显式设置container-type: inline-size等才能触发@container规则，且尺寸判断基于内容区可用宽度而非样式width值。
容器查询没生效，@container 规则完全不触发
根本原因通常是父容器缺少明确的“容器类型”声明。CSS 容器查询不是默认开启的，必须显式设置 container-type（或旧语法 container）才能让子元素的 @container 生效。
常见错误现象：@container (min-width: 300px) { ... } 写了但样式从不应用，开发者反复检查媒体查询写法，却漏掉父级容器本身没被标记为容器。
- 必须在父容器上设置
container-type: inline-size（最常用）或container-type: size；inline-size基于行内方向尺寸（如 width），size需同时满足宽高约束，兼容性更差 - 不能依赖 display 类型自动推断：
div、section等普通块级元素即使有 width，也不会自动成为容器 - 避免链式失效：如果中间某层父元素没设
container-type，再上层的容器声明也无法“穿透”下来影响子子孙孙 - Chrome 110+ / Safari 16.4+ / Firefox 119+ 支持
container-type；旧版 Safari 需用container: name / type且需命名，但现代开发建议统一用无名 +container-type
@container 中的 min-width 和 width 行为差异
@container 的尺寸条件不是直接读取容器的 CSS width 值，而是基于其「可用的行内尺寸」（inline-size available space），也就是内容区实际宽度，受 padding、border、box-sizing 影响。
使用场景：你想让卡片组件在父容器缩到 320px 宽时切换为单列，但发现它总比预期早或晚切换——大概率是没考虑容器自身的内边距或盒模型。
立即学习“前端免费学习笔记（深入）”；
-
min-width: 320px检查的是容器 content box 的可用宽度 ≥ 320px，不是offsetWidth或 computedwidth - 如果容器设了
padding: 16px和box-sizing: border-box，那它的 content box 宽度 = 样式 width - 32px；若样式 width 是 352px，content box 刚好 320px，此时min-width: 320px才匹配 -
width: 320px是精确匹配（极少用），而min-width/max-width是区间判断，更符合响应式逻辑 - 不要混用
em或rem单位：容器查询只支持px、vw、%（仅当父容器有明确尺寸时）、ch等绝对或上下文相关单位；em在容器查询中行为未定义，应避免
React/Vue 组件里用 @container，为什么样式总“闪一下”？
本质是渲染时机问题：组件挂载时，父容器尺寸可能尚未稳定（比如图片加载中、字体未就绪、JS 动态插入内容），导致容器查询初始匹配失败，后续尺寸变化才触发重计算，造成样式跳变。
这不是 CSS 错误，而是布局流与样式计算的时间差。尤其在 SSR 或 hydrate 场景下更明显。
- 确保容器有明确的初始尺寸：避免
height: auto+ 异步内容撑开；可加min-height或占位::before防抖动 - 慎用
container-name：命名容器需要全局唯一，若多个同名容器存在，浏览器只认第一个，容易引发意料外的覆盖 - Vue 中若用
v-if控制容器显示，切换瞬间容器消失再重建，会丢失容器状态；改用v-show保持 DOM 存在更稳妥 - React 中若容器由
useState控制显示，同理建议用display: none切换而非卸载重挂
能用 @container 替代所有媒体查询吗？
不能。容器查询解决的是“组件内部如何响应自身容器尺寸”，媒体查询解决的是“整个视口如何响应设备能力”。两者定位不同，常需共存。
容易踩的坑是把所有响应式逻辑一股脑塞进容器查询，结果在小屏手机上组件明明很窄，却因父容器（比如一个固定 800px 宽的 sidebar）始终满足 min-width: 768px，导致移动样式完全不触发。
- 典型共存模式：用媒体查询控制整体布局（如
@media (max-width: 768px) { .sidebar { display: none; } }），再用容器查询控制组件细节（如@container (min-width: 300px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }） - 容器查询无法获取设备 DPR、横竖屏、prefers-color-scheme 等信息，这些仍必须靠媒体查询
- 嵌套过深的容器查询（比如 4 层以上）可能带来不可预测的重排开销，尤其在频繁 resize 场景；优先保证关键层级有容器声明，非核心区域保持简洁
真正麻烦的从来不是语法写对没写对，而是你得想清楚：这个尺寸阈值，到底该由谁来决定——是用户手里的屏幕，还是组件嵌套的上下文。一不留神，就写成了“视口查询”和“容器查询”的混合体，然后花半天时间调试为什么 iPhone 上它不按你说的来。
