container queries 不能直接用 @container 生效，因为必须显式声明 container-type（如 inline-size）才能激活父元素的容器资格，否则查询规则不会触发；常见错误是遗漏该声明。
Container Queries 为什么不能直接用 @container 就生效？
因为默认情况下，任何元素都不具备容器资格——CSS 引擎不会主动把某个父元素当作查询上下文。必须显式声明 container-type（或简写 container）才能激活它。
常见错误是写了 @container (min-width: 400px) { ... } 却没给父元素加 container-type: inline-size，结果样式完全不触发。注意：inline-size 是最常用类型（对应宽度），block-size 对应高度，但后者支持度更低（Chrome 117+ 才稳定）。
- 必须设置
container-type: inline-size（或container: name / inline-size） - 不要依赖 display 类型：
div、section甚至span都能当容器，只要加了该声明 - 避免套在
display: contents或display: none元素里——它们不产生布局盒，无法测量尺寸
如何给组件封装一个可复用的容器查询逻辑？
别在每个使用处重复写 container-type。推荐用自定义属性 + container-name 组合，让组件自己“声明身份”：
.card {
container-type: inline-size;
container-name: card;
}
<p>@container card (min-width: 300px) {
.card<strong>title { font-size: 1.25rem; }
}
@container card (min-width: 500px) {
.card</strong>title { font-size: 1.5rem; }
}</p>
这样 .card 元素既是容器，又自带名字，子元素样式就能精准锚定。如果多个同类组件并列，名字冲突？那就用唯一值：container-name: card-1，或直接省略名字，改用匿名查询（但需确保父容器唯一）。
- 命名容器适合跨组件复用逻辑；匿名查询更轻量，适合单次内联使用
- 不要给同一个元素同时设两个
container-type——浏览器只认最后一个 - 若组件被包裹在 Flex/Grid 容器中，确认父容器没加
overflow: hidden等限制测量的属性
和媒体查询比，Container Queries 在哪些场景明显更靠谱？
媒体查询响应的是视口，而 Container Queries 响应的是父容器——这对卡片网格、侧边栏嵌套、CMS 动态区块特别关键。比如一个 aside 区域在桌面端占 30%，在移动端收窄为 100%，里面的按钮图标要不要变大？媒体查询做不到，因为它不知道 aside 实际占了多少像素。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
这时只需：
aside {
container-type: inline-size;
}
@container (min-width: 280px) {
.aside__action-btn { padding: 0.5rem 1rem; }
}
@container (min-width: 420px) {
.aside__action-btn { padding: 0.75rem 1.5rem; }
}
- 同一份 HTML，在不同布局上下文中自动适配，不用 JS 监听 resize
- 避免“断点漂移”：媒体查询常因外层 wrapper 的 padding/margin 导致实际可用宽度与预设不符，而容器查询测的是内容盒（content-box）宽度
- 注意：目前不支持基于字体大小或行高查询，仅限尺寸、块轴、内联轴
兼容性和 fallback 怎么处理才不翻车？
截至 2024 年中，Chrome 105+、Firefox 110+、Safari 16.4+ 支持，但 Safari 旧版（16.0–16.3）有严重 bug：@container 规则会被整个忽略，且不报错。所以不能只靠 @supports 检测语法，得结合行为验证。
稳妥做法是双轨并行：
.widget {
/* 默认小屏样式 */
font-size: 0.875rem;
}
@supports (container-type: inline-size) {
.widget {
container-type: inline-size;
}
@container (min-width: 320px) {
.widget { font-size: 1rem; }
}
}
-
@supports必须包裹整个容器声明 + 查询规则，否则 Safari 旧版会执行到一半失效 - 不要用
@container替代所有响应逻辑——复杂嵌套层级下，父容器尺寸可能受子内容反向影响（如 shrink-to-fit），导致循环依赖 - 调试时打开 Chrome DevTools 的 “Rendering” 面板，勾选 “Show container queries”，能看到哪些元素被识别为容器
真正麻烦的不是语法写不对，而是默认不生效这个事实本身——很多人卡在第一步，却以为是写法问题，其实只是忘了加那行 container-type。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
