容器查询不支持CSS变量动态响应，需通过container-type设上下文并在@container内重定义变量；clamp()无法与容器单位混用，必须用离散断点配合fallback值实现响应式缩放。
容器查询不支持直接用 CSS 变量做响应式计算
你不能写 --size: clamp(1rem, 5vw, 2rem) 然后指望它在容器尺寸变化时自动重算——CSS 变量本身是静态的，clamp() 在声明时就求值了，不会随容器查询（@container）触发重计算。
真正能响应容器尺寸的是 @container 规则内的样式块，变量得在其中“重新赋值”才生效。
- 必须先用
container-type: inline-size（或size）给父容器设容器查询上下文 - CSS 变量要放在
@container块内部，用--var-name: value覆盖 - 变量作用域是当前选择器及其后代，不是全局重定义
怎么让一个元素的字体大小随其父容器宽度缩放
核心是两步：设容器查询上下文 + 在不同容器断点里更新变量值。
比如你想让卡片标题在容器宽 ≤ 400px 时用 1.1rem，401–600px 用 1.25rem，>600px 用 1.4rem：
立即学习“前端免费学习笔记（深入）”；
.card {
container-type: inline-size;
}
.card h2 {
font-size: var(--title-size, 1.1rem);
}
@container (min-width: 401px) {
.card h2 {
--title-size: 1.25rem;
}
}
@container (min-width: 601px) {
.card h2 {
--title-size: 1.4rem;
}
}
- 注意断点值不能重叠，
@container (min-width: 400px)和(min-width: 401px)在边界处可能因渲染精度导致闪烁 -
var(--title-size, 1.1rem)的 fallback 是必须的，否则未命中任何@container时会回退到初始值（可能为unset） - 变量名要一致，且必须在使用前被声明（哪怕只是 fallback）
为什么用 clamp() 配合容器查询反而容易出错
clamp() 本身依赖视口单位（如 vw）或固定值，它对容器尺寸无感知。强行混用会导致行为不可控：
- 写
--size: clamp(1rem, 3cqw, 1.5rem)——cqw是容器查询单位，但只能用于@container内部的长度声明（如font-size: 3cqw），不能用于变量赋值 - 浏览器会静默忽略含
cqw的变量声明，var(--size)回退到 fallback 或无效值 - 想实现平滑缩放，得靠多个离散的
@container断点 + 合理间隔（比如 320/480/640/768px），而不是幻想“连续响应”
兼容性与 fallback 必须手动处理
容器查询目前（Chrome 105+、Firefox 119+、Safari 16.4+）支持尚可，但 IE 和旧版 Safari 完全不识别 @container，也不会报错，只会跳过整个规则块。
- 所有依赖容器查询的变量更新都得有默认值：比如
font-size: var(--title-size, 1.2rem)，不能只靠@container设置 - 不要用
container-name做复杂嵌套，多数场景一个inline-size就够用；命名容器（container-name: card;）反而增加维护成本和兼容风险 - 调试时用浏览器 DevTools 的 “Layout” 面板看容器查询是否激活（有蓝色容器边框），别只盯着 computed 样式里的变量值
变量本身不响应，响应的是容器查询规则块；每次修改变量，本质是覆盖局部作用域里的声明。这点很容易被当成“动态变量”而误用。
