用途：指导使用 CSS 容器查询实现基于组件的响应式设计，让组件根据所在容器尺寸而非浏览器视口尺寸调整样式，从而提升可复用性。
主要能力：对比容器查询与媒体查询的差异（响应对象、可复用性、适用场景、语法 @container 与 @media）；说明容器查询在组件可移植性、组件逻辑简化、设计系统维护和现代组件化架构中的价值；给出何时用容器查询（可复用组件、多上下文出现、需适配父容器、组件库）与何时用媒体查询（页面整体布局、导航结构、全局字号、视口特性）的判断依据。
使用方式：原生 CSS 中先用 container-type: inline-size（或 size）与可选 container-name 定义容器，再用 @container 名称 (min-width: 400px) 编写查询，也支持 400px <= width <= 800px 范围语法。Tailwind 中在父元素加 @container 类，子元素使用 @sm、@md、@lg 等容器变体；命名容器写作 @container/main 与 @lg/main:grid-cols-3。文中列出 Tailwind 默认容器断点（@3xs 16rem 至 @7xl 80rem），并说明可在 globals.css（Tailwind v4）用 CSS 变量自定义或使用 @min-[500px] 任意值。
常见模式：卡片组件、响应式网格、容器查询与媒体查询混用（媒体查询管页面布局、容器查询管组件内部）。
限制与注意事项：不要用容器查询替代全部媒体查询或用于页面级布局；使用前必须定义容器；避免固定高度导致内容溢出，建议用 min-height 或让内容决定高度；避免过多嵌套容器，多容器时应命名；浏览器支持为 Chrome 106+、Edge 106+、Safari 16+、Firefox 110+，旧浏览器可用 @supports 做渐进增强。
资料未提供安装命令、收费或价格信息。