容器查询生效需父容器设container-type: size或inline-size；仅container-name无效；@container只响应自身尺寸变化，不感知子元素变动；CSS变量需在@container内重定义实现动态更新；Chrome 110+/Safari 17.4+支持，旧版应先写通用样式再用@container覆盖。
container查询不生效？先确认父容器是否设了size
用 @container 前，浏览器根本不会触发容器查询——不是写完CSS就自动响应。必须给目标父容器显式设置 container-type: size（或 inline-size），否则所有 @container 规则都会被忽略。
- 只设
container-name不起作用，container-type是硬性前提 - 如果父容器是
display: inline或未设宽高，size类型可能无法获取尺寸，此时改用inline-size更稳妥 - 嵌套容器时，只有最近的、带
container-type的祖先生效，外层设了也没用
CSS变量怎么在@container里动态更新？不能直接用var()做条件
@container 本身不能读取或修改 CSS 变量值，它只响应容器尺寸变化；变量的响应式更新得靠「媒体查询式写法 + 自定义属性重定义」来配合实现。
- 在
@container (min-width: 400px)块里，可以重新声明--gap: 16px，但不能写if (var(--breakpoint) > 400px)这类逻辑 - 变量名要保持一致，否则后续用
var(--gap)会 fallback 到上层定义，不会“继承”容器内的新值 - 不要试图在
@container中用calc(var(--base) * 2)做条件计算——计算发生在声明时，不是查询触发时
为什么container查不到子元素宽度变化？它只看容器自身尺寸
@container 监听的是**该容器自身的尺寸变化**，不是子元素 layout 变动。子元素增删、flex换行、内容撑开高度……这些都不会触发容器查询，除非它们导致容器的 width 或 height 实际改变。
- 常见误判：给卡片加
flex: 1后内容变多，以为容器宽度变了——其实只是内部伸缩，容器 width 没变，查询不触发 - 如果依赖子内容驱动响应，得配合
resize: horizontal或 JS 的ResizeObserver手动更新容器尺寸，再让 CSS 变量承接 - 用
container-type: inline-size能更好兼容文本流变化，但它仍不感知子元素 margin/padding 的微小波动
Chrome 110+才支持，旧版fallback怎么写才不冗余？
目前只有 Chromium 110+ 和 Safari 17.4+ 原生支持 @container，Firefox 尚未实现。别用 @supports (container-type: size) 包一层就完事——它在不支持的浏览器里直接跳过，没 fallback。
- 推荐写法：先写通用规则（如移动端样式），再用
@container覆盖中大屏逻辑，这样不支持时自动回退 - 避免重复声明，比如不要在
@container里又写一遍font-size: 14px，而应只写差异部分（如font-size: 16px） - 构建时可通过 PostCSS 插件把
@container编译为等效媒体查询，但要注意：编译后失去容器上下文语义，可能误匹配全局视口
真正难的不是语法，是判断「这个组件到底该由谁控制尺寸」——容器查询让你把响应逻辑下放到组件内部，但前提是这个“内部”真能被浏览器稳定测量。稍有布局干扰（比如 float、absolutely positioned 子项），container-type: size 就可能失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
