CSS container query 为什么在子组件中不生效

CSS container query 在子组件中“不生效”，最常见的原因不是子组件选择器写错，而是它的祖先元素没有建立查询容器，或者查询条件实际匹配到的是另一个嵌套容器。先在包住组件的父级加上 container-type: inline-size，再把 @container 写成作用于该容器后代的规则；如果页面有多层卡片，就用 container-name 指定查询对象。

容器查询看的是合格祖先容器的尺寸，不是浏览器视口尺寸。父级没有 container-type，或子组件不在该容器的后代范围内，规则就不会按预期触发。

为什么子组件看不到 container query

@media 依据视口判断，@container 依据祖先容器判断。下面这段写法看起来完整，但不会触发尺寸查询：

/* 只有查询规则，没有建立可查询的父级上下文 */
.profile-card {
  display: grid;
  gap: 12px;
}

@container (width > 520px) {
  .profile-card {
    grid-template-columns: 96px 1fr;
  }
}

原因是浏览器找不到带尺寸 containment 的祖先。这里的 .profile-card 是被调整的子组件，不是查询容器。另一个容易忽略的边界是作用域：规则只能影响查询容器内部的后代，不能反过来改变容器自身，也不能越过不相关的组件树。

最小可用写法：把 container-type 放在父级

把容器上下文放在布局真正控制宽度的元素上，组件本身只负责响应。示例中 .dashboard-column 可能被放进侧栏或主栏，卡片不需要知道外层页面的宽度。

A
    

      
项目成员
      
负责响应式组件的维护。
    
  

/* inline-size 适合大多数横向响应式卡片，保留块方向的自然高度 */
.dashboard-column {
  container-type: inline-size;
  padding: 16px;
}

.profile-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 条件判断的是 dashboard-column 的可用内联尺寸 */
@container (min-width: 520px) {
  .profile-card {
    grid-template-columns: 96px 1fr;
    align-items: center;
  }
}

检查时不要只改变浏览器窗口。可以在开发者工具中临时修改 .dashboard-column 的宽度，观察 .profile-card 是否从单列变成头像加内容的两列。若父级宽度改变而规则仍没有命中，再检查容器类型和条件语法。

复杂嵌套时怎样控制查询对象

默认规则会寻找最近的合格祖先。组件外面同时存在卡片组、侧栏和页面壳层时，最近容器的宽度可能不是你以为的那个。给目标父级命名后，可以把意图写进规则：

/* 名称与尺寸类型一起声明，避免嵌套时依赖“最近容器” */
.dashboard-column {
  container: member-panel / inline-size;
}

.profile-card {
  display: grid;
  grid-template-columns: 1fr;
}

/* 只对名为 member-panel 的容器进行判断 */
@container member-panel (min-width: 520px) {
  .profile-card {
    grid-template-columns: 96px 1fr;
  }
}

命名查询不是给子组件加名字，而是给容器加名字。名称拼写、连字符和层级必须一致；如果写了 container-name 却忘记 container-type，只做尺寸判断时仍然不完整。使用简写 container: member-panel / inline-size 可以同时表达两者。

兼容与排查清单

按下面顺序检查，通常能在几分钟内定位问题：

/* 基础布局先可用，支持容器查询时再增强 */
.profile-card {
  display: grid;
  grid-template-columns: 1fr;
}

@supports (container-type: inline-size) {
  .dashboard-column {
    container-type: inline-size;
  }
}

@supports (container-type: inline-size) {
  @container (min-width: 520px) {
    .profile-card {
      grid-template-columns: 96px 1fr;
    }
  }
}

如果项目需要兼容不支持容器查询的浏览器，基础样式应当能独立工作；不要把所有可读性和可用性都押在增强规则上。MDN 对尺寸查询的说明也区分了 inline-size 与 size：前者只根据内联方向判断，通常更适合高度由内容决定的卡片。

常见问题

container query 能直接改变父容器自己的宽度吗？

不能把它当成“子元素反向设置父级”的机制。查询规则主要用于匹配容器内部的后代，父级宽度仍由外层布局、尺寸约束或内容决定。

为什么写了 container-name 还是没有效果？

检查同一容器是否同时具备合适的 container-type，并确认 @container 后的名称完全一致；只命名而没有尺寸类型时，尺寸条件没有可用上下文。

container query 和 media query 应该怎么选？

组件需要适应所在卡槽、侧栏或网格列时选容器查询；整页导航、视口级间距和设备方向等与窗口有关的规则仍适合媒体查询。