@container 规则失效最常见原因是父容器未声明 container-type: inline-size 或 size；它需显式设置且父元素要有明确渲染尺寸，否则浏览器静默忽略。
不能直接“感知”容器尺寸并自动计算颜色，CSS 没有运行时条件表达式；必须用 @container 匹配断点 + CSS 变量中转，且容器必须显式声明 container-type: inline-size。
为什么 @container 规则写了却没反应
最常见原因是父容器没加 container-type。浏览器会完全忽略所有 @container 块，连警告都不抛。它不像媒体查询那样“退化可用”，而是彻底静默失效。
- 必须在直接父元素上设置
container-type: inline-size（仅监听宽度）或container-type: size（宽高都监听） - 该父元素需有明确渲染尺寸：不能是
display: contents、float: none且无overflow的 flex/grid 子项 - 避免写在
<body>上——它通常不构成独立 BFC，尺寸不可靠 - 用 DevTools 的 Layout 面板确认该元素右下角是否显示 “container” 标签，这是唯一可靠验证方式
怎么用 @container 切换颜色变量
核心是把颜色决策从“属性值”移到“变量赋值”，由子元素消费。你无法写 color: hsl(calc(var(--mouse-x) * 360), 70%, 50%) 这类动态表达式，但可以分段控制：
- 在容器内用
@container (min-width: 400px)设置--text-color: #007bff - 再用
@container (min-width: 600px)覆盖为--text-color: #10b981 - 子元素统一写
color: var(--text-color, #374151)，fallback 值防未命中 - 多个断点之间不要留空隙，比如
(max-width: 399px)和(min-width: 400px)要严格衔接
和媒体查询的关键区别在哪
媒体查询响应视口，@container 响应父容器实际渲染宽度。同一页面里，两个相同组件嵌入不同宽度的卡片区域，它们的颜色会各自按所处容器变，而不是全屏统一按 768px 切换。
立即学习“前端免费学习笔记（深入）”；
- 折叠屏展开后，侧边栏容器仍窄（如 280px），主内容区容器变宽（如 680px），两者可触发不同颜色变量
- Flex 或 Grid 子项默认不支持
@container，必须包裹一层div并设container-type -
@container不支持连续变化，只有离散断点；要实现平滑过渡，得靠transition: background-color 0.2s在变量变更后生效 - 兼容性上，Chrome 110+、Safari 16.4+ 原生支持；Firefox 仍需
@supports (container-type: inline-size)降级
真正容易被忽略的是：变量值本身不会重算，@container 只是开关规则块。一旦容器尺寸跨过断点，浏览器重新应用整套样式，但中间过程没有插值、没有回调、也没有事件——它就是一次同步样式重排。如果你需要像素级实时响应（比如宽度每变 1px 就调色），那必须上 ResizeObserver + JS。
