容器查询不是媒体查询，它监听父容器尺寸而非视口变化；需显式声明container-type启用作用域；断点基于容器自身内联尺寸；适用于弹窗表单、仪表盘卡片等局部自适应场景；无自动降级，须手动提供保底样式。
容器查询不是媒体查询，别直接套 @media
容器查询（Container Queries）解决的是“组件在不同尺寸容器中如何自适应”，而不是“整个视口变小了怎么改布局”。它不依赖 window.innerWidth 或 viewport，而是监听父容器的宽高变化。如果你还在用 @media (max-width: 480px) 去控制某个卡片组件的字体大小，那其实没用——卡片可能被塞进一个 200px 宽的侧边栏里，但视口仍是 1200px，媒体查询根本不会触发。
启用容器查询前必须显式声明容器作用域，否则所有 @container 规则都会被忽略：
/* 必须加这个，否则下面的 @container 不生效 */<br>.card {<br> container-type: inline-size;<br> container-name: card;<br>}
注意两点：container-type: inline-size 表示只响应宽度变化（最常用），container-name 是可选标识，用于精准匹配特定容器（避免嵌套时误触发）。
@container 语法和断点写法和媒体查询很像，但单位含义不同
容器查询里的 width 指的是“该容器自身的内联尺寸”，不是视口宽度。所以你写 width > 300px，意思是“当这个卡片容器内容区宽度超过 300px 时才生效”，和设备无关。
常见写法示例：
-
@container card (min-width: 300px) { .card-title { font-size: 1.25rem; } }—— 名字 + 条件，推荐用于复杂嵌套 -
@container (min-width: 250px) { .card-body { padding: 1rem; } }—— 匿名容器，只要父级有container-type就能匹配 - 支持组合条件：
@container (min-width: 300px) and (orientation: landscape)，但注意这里的orientation是容器的宽高比倾向，不是设备方向
不支持 em、rem 等相对单位作断点值，只能是 px、vw（但 vw 在这里仍指容器宽度的 vw，非常容易误解，建议统一用 px）。
移动端组件适配中真正有用的三个场景
容器查询的价值不在“全站响应式”，而在解决那些媒体查询搞不定的局部问题：
- 弹窗内的表单字段：弹窗宽度随屏幕变化，但内部输入框需要在 280px 容器里单行显示，在 400px 里变成两列布局 —— 这时
@container (min-width: 350px)比查视口靠谱得多 - 仪表盘网格卡片：每个
.dashboard-card被 Grid 的auto-fit分配不同宽度，卡片内部头图、文字区域需按自身可用宽度调整比例，而不是按屏幕尺寸切几套样式 - 富文本编辑器插件面板：面板可能插入到文章正文任意位置，宽度由父
<article></article>决定，用容器查询可让工具栏按钮在窄容器里堆叠，在宽容器里横排
这些场景共同点是：组件位置不确定、嵌套层级深、父容器尺寸不可控。这时候硬写 @media 只会让 CSS 膨胀且维护困难。
兼容性与降级必须手动处理，浏览器不会自动 fallback
截至 2026 年中，Chrome 110+、Firefox 119+、Safari 16.4+ 支持容器查询，但 Safari 对 container-name 的匹配仍有偶发失效（尤其配合 Vue/React 动态 class 时）。更关键的是：@container 规则不支持任何自动降级机制。
这意味着你必须自己提供基础样式（无查询时的默认表现），再叠加容器查询增强：
.card-title {<br> font-size: 1rem; /* 所有情况下的保底字体 */<br>}<br><br>@container (min-width: 320px) {<br> .card-title { font-size: 1.125rem; }<br>}<br><br>@container (min-width: 480px) {<br> .card-title { font-size: 1.25rem; }<br>}
不能指望浏览器在不支持时“退回到媒体查询”——它只会忽略整条 @container 规则。另外，container-type 属性本身不支持 @supports 检测（CSS spec 明确禁止），所以无法用 CSS 做特性检测降级，得靠 JS 注入或构建时条件编译。
实际项目中最容易被忽略的点：容器查询生效的前提是父容器有明确的块级格式化上下文（BFC），如果父容器是 display: inline 或浮动元素，container-type 会静默失效。务必检查 computed styles 中是否真的启用了 container query capability。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
