容器查询需父元素显式声明container-type（如inline-size），否则@container规则静默失效；其min-width基于父容器内容宽度而非视口，须配合clamp()实现平滑缩放，且注意safari渲染延迟问题。
容器查询 @container 不能直接用，先确认父元素有容器类型
容器查询不是“写了就生效”，父容器必须显式声明 container-type（或 container 简写），否则所有 @container 规则都会被浏览器忽略——连报错都不会有，静默失效。
常见错误是直接在 div 上写 @container (min-width: 400px) { ... }，但父元素没设类型，结果文字大小完全不响应。
- 必须给父容器加
container-type: inline-size;（最常用）或container-type: size;（需同时满足宽高约束） -
inline-size只看内容方向尺寸（通常是宽度），兼容性更好；size要求父容器有明确的宽高（比如设置了width和height，或由 flex/grid 严格限定），否则查不到尺寸 - 避免套在
display: contents或未设尺寸的float元素里——这些容器无法成为查询上下文
@container 中的 min-width 是相对于容器内容区，不是视口
这是和媒体查询 @media 最本质的区别：容器查询的 min-width: 300px 指的是该父容器的**内容宽度**（content box width），不是整个屏幕。同一页面多个相同组件，只要各自父容器宽度不同，文字就会各自响应。
例如卡片列表中每个 .card 都设了 container-type: inline-size，那么窄栏里的卡片文字变小，宽栏里的自动变大——不需要 JS、不用监听 resize。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 不要用
em或rem写容器查询条件，只接受绝对单位（px、rem在容器查询中会被转为像素计算，但语义易混淆，建议统一用px） - 容器内盒模型影响实际可查尺寸：如果父容器有
padding或border，inline-size查的是 content box，不是总宽度 - 嵌套容器时，子容器查询基于其**直接父容器**，与外层无关
字体缩放要配合 clamp() 才平滑，单靠容器查询会阶梯跳变
只用 @container 切换几个固定字号（比如 14px/16px/18px）会导致文字在临界点突然跳变，体验生硬。真正适配应结合 clamp() 做连续缩放。
典型写法是：容器查询定范围 + clamp() 在范围内线性插值。
/* 父容器 */
.card {
container-type: inline-size;
}
<p>/<em> 子文字 </em>/
.card h2 {
font-size: clamp(1.125rem, 4vw, 1.5rem);
}</p><p>@container (min-width: 320px) {
.card h2 {
font-size: clamp(1.25rem, 4.5vw, 1.75rem);
}
}
@container (min-width: 480px) {
.card h2 {
font-size: clamp(1.375rem, 5vw, 2rem);
}
}</p>
-
clamp(min, preferred, max)的preferred建议用vw，它基于**视口宽度**，但配合容器查询后，实际生效区间被限制在该容器宽度范围内，效果更可控 - 避免在
@container中用em做font-size计算——它会继承当前字号，形成循环依赖，结果不可预测 - 如果需要精确控制缩放比例（比如每 100px 容器宽度对应字号 +0.1rem），得用 CSS 自定义属性 +
calc()，但复杂度陡增，多数场景clamp()更稳
Chrome 110+、Safari 16.4+、Firefox 119+ 支持，但 Safari 有渲染延迟
容器查询已进标准，主流新版浏览器都支持，但 Safari 存在真实问题：容器尺寸变化后，@container 样式可能延迟 1–2 帧才应用，尤其在快速拖拽调整窗口或 flex 容器重排时，文字会短暂“卡住”旧尺寸。
- 临时缓解：给父容器加
will-change: content-visibility;或contain: layout style（慎用，可能影响滚动性能） - 不要依赖容器查询做关键布局判断（比如按钮是否显示图标），它适合字体、间距、圆角等装饰性响应
- 服务端渲染（SSR）或静态站点生成（SSG）时，容器查询纯客户端生效，首屏仍按默认样式渲染，无回流问题但无初始响应
实际用起来，最常卡住的不是语法，而是忘了给父元素加 container-type；最常误用的，是把容器查询当媒体查询抄过来改个关键字，却没意识到尺寸参照系已经变了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
