CSS容器查询的核心概念与语法

容器查询解决的是组件长期无法感知自身所处空间、只能依赖视口尺寸做响应式判断的结构性矛盾。媒体查询监听的是视口宽度，适合页面级宏观布局；组件则经常被放入主内容区、侧边栏或模态框等宽窄迥异的上下文中。容器查询让元素能够基于最近祖先容器的尺寸自主决定布局，从而使组件真正具备“自我感知”能力，而不必依赖修饰类或运行时计算。

其核心语法可归纳为三步。第一步是声明查询容器：在祖先元素上设置 container-type。最常用的取值是 inline-size，只监听内联方向尺寸（通常即宽度）；若需同时监听宽高，使用 size；normal 则关闭查询。第二步是可选的命名：用 container-name 为容器起名，避免多层嵌套时查询命中错误祖先。第三步是编写条件规则，语法与 @media 几乎一致，例如：

.card-container {
  container-type: inline-size;
  container-name: card-wrapper;
}
@container card-wrapper (min-width: 400px) {
  .product-card {
    grid-template-columns: 200px 1fr;
  }
}

@container 支持 min-width、max-width 以及范围写法，如 (300px <= width < 600px)。未声明 container-type 时查询会静默失效且无控制台报错，这是最常见的疏漏。浏览器支持方面，Chrome 105+、Firefox 119+、Safari 16.4+ 已覆盖，全球可用率已超 92%。旧环境可配合 @supports 做渐进增强，不支持的浏览器将忽略查询块并回退到基础态。

理解上述概念边界至关重要：容器查询内聚在组件内部，断点与组件自身契约绑定，适合卡片形态、导航收折、表单密度等微观自适应；媒体查询则仍承担页面级职责。把 container-type、container-name 与 @container 三者关系理清，才是把容器查询正确装入组件化工具箱的前提。