Container Queries 无法直接根据尺寸切换颜色，必须通过@container匹配尺寸范围并在对应规则中显式设置CSS变量，子元素再消费该变量；容器需声明container-type: inline-size才生效。
Container Queries 本身不支持直接根据尺寸切换颜色
容器查询（@container）只能触发样式块的启用或禁用，不能像媒体查询那样在单个属性里做条件计算。也就是说，你不能写 color: clamp(...) 或 color: var(--text-color) 并指望它“自动响应容器宽高变化”——变量值本身是静态的，不会随容器 resize 动态重算。
真正可行的路径是：用 @container 匹配不同尺寸范围 → 在对应规则中显式设置颜色变量 → 在子元素中消费该变量。
关键前提：目标元素必须是该容器的后代，且容器需声明 container-type（通常是 inline-size）。
必须显式声明 container-type 才能启用 @container
没加 container-type 的元素，哪怕写了 @container (min-width: 400px) { ... } 也完全不生效。浏览器根本不会把它当容器看待。
常见错误包括：
- 只写了
container-name却漏掉container-type - 把
container-type: size用在非 replaced 元素上（比如普通div），这会失效；应优先用inline-size - 父容器用了
display: contents或display: none，导致容器上下文丢失
正确写法示例：
.card {
container-type: inline-size;
container-name: card;
}
之后才能写：
@container card (min-width: 300px) {
.card-title {
--title-color: #2563eb;
}
}
@container card (min-width: 600px) {
.card-title {
--title-color: #1e40af;
}
}
颜色变量必须在祖先容器规则中设置，不能靠 JS 动态注入
想让子元素响应容器尺寸变色，--title-color 这类变量必须由容器自身或其直接父级（且已设 container-type）通过 CSS 规则注入。JS 修改 style.setProperty() 虽然能改变量值，但无法触发 @container 的匹配逻辑——它只响应布局尺寸变化，不监听自定义属性变更。
所以不要试图用 JS 监听 ResizeObserver 再去 set 变量，那绕远了，也失去了 Container Queries 的意义。
实用建议：
- 把变量声明放在容器选择器内部（如上例），确保作用域精准
- 避免在 :root 或全局 scope 提前定义同名变量，否则会被覆盖或不生效
- 如果需要 fallback 颜色，可在子元素自身写默认值：
color: var(--title-color, #6b7280);
注意 container-name 的作用域与命名冲突
container-name 不是全局唯一 ID，而是在当前作用域内查找最近的、匹配的容器。如果多个同名容器嵌套，内层规则可能意外匹配到外层容器。
更稳妥的做法是：
- 不用通用名（如
card），改用带语义+作用域的组合名，例如product-card-main - 避免跨组件复用相同
container-name，尤其在 Web Components 或 Shadow DOM 中 - 调试时可用 DevTools 的 “Layout” 面板勾选 “Show container queries”，查看哪些元素被识别为容器及匹配状态
另外，@container 目前不支持 max-height 或 aspect-ratio 条件（Chrome 119+ 开始支持 aspect-ratio，但 Safari 仍无），别在生产环境依赖这些尚未普及的特性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
