用途：当组件需要根据父容器尺寸而非视口宽度自适应时使用容器查询；页面级布局仍用媒体查询。目标是让响应式组件可移植，减少组件内部与页面布局的耦合。
主要能力与规则：使用容器变体前必须先定义容器；除非高度也重要，否则优先用 inline-size；附近有多个容器时应为容器命名；保持容器嵌套较浅；内容随断点变化时避免固定高度；不要把所有媒体查询都替换为容器查询。
用法示例：父级写 .card-wrapper { container-type: inline-size; container-name: card; }，再用 @container card (min-width: 400px) { .card { display: grid; } }。Tailwind 中可用 <div class="@container"> 包裹，子元素用 @lg:grid-cols-2、@lg:gap-4 等容器变体。
流程：找出使用视口断点的组件内部样式；判断该组件是否应随父容器尺寸变化；在父包装元素上添加容器；把内部视口断点替换为容器变体；页面级媒体查询保留在布局文件中；在窄、中、宽容器下测试。
测试要点：组件在侧边栏宽度、主内容宽度、网格单元内均可用，内容不溢出。
限制：资料未提供具体浏览器兼容范围、性能数据或安装命令，需参考 MDN、Tailwind、CSS Tricks、Can I Use 等资源自行确认。输出格式为容器查询评审清单，含组件名、是否使用、原因、改动与验证结果。