CSS container query怎么配置或排查

我第一次把卡片从页面栅格里抽出来复用时，最容易误判的是：浏览器窗口变宽了，卡片却没有变成双栏。原因通常不是断点写错，而是把 @container 当成了 @media。container query 观察的是祖先容器，不是视口；要先在真正决定卡片宽度的父元素上建立查询上下文。

最小修复是给父元素加 container-type: inline-size，再用 @container (min-width: 38rem) 修改后代卡片。若仍不生效，依次检查容器宽度、最近的有效祖先、选择器覆盖和浏览器支持。

先把卡片放进真正的查询容器

假设页面侧栏和主内容都会放置同一张卡片，视口宽度并不能说明卡片到底有多宽。下面的 .card-shell 才是布局边界，所以容器声明应该放在那里，而不是写在卡片自身或更外层的页面壳上。

/* 默认单栏，容器查询只负责渐进增强 */
.card-shell {
  container-type: inline-size;
  container-name: card-shell;
  padding: 1rem;
}

/* 先让内容在窄容器中自然堆叠 */
.card {
  display: grid;
  gap: 1rem;
}

/* 条件针对容器宽度，而不是浏览器视口宽度 */
@container card-shell (min-width: 38rem) {
  .card {
    grid-template-columns: minmax(8rem, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
  }
}

这里用 inline-size 而不是 size，是因为卡片只需要依据横向空间变化。尺寸容器会引入相应的 containment 约束；如果容器没有可确定的宽度，带尺寸隔离的元素还可能出现高度或布局塌陷。普通块级容器通常能从父布局获得宽度，但绝对定位、浮动或特殊布局仍应显式确认它的可用内联尺寸。

不生效时按四个证据定位

排查时不要先改断点。打开开发者工具查看计算后的样式，按下面顺序确认：第一，父元素是否真的有 container-type；第二，查询时容器的实际内联尺寸是多少；第三，.card 是否仍在该容器的后代范围内；第四，是否有更高优先级规则覆盖了查询里的声明。

命名容器能减少嵌套布局中的猜测，但名称本身不会创建查询上下文；仍需配合 container-type。同时，查询里的选择器只能作用于容器的后代，不能反过来修改容器自身。若要用多个祖先条件，应该嵌套多个 @container，不要假设一条规则可以同时独立读取多个容器。

用默认样式和 @supports 做兼容降级

container query 已在主流浏览器中广泛可用，但项目仍可能有旧 WebView、嵌入式浏览器或受控企业环境。最稳妥的策略是：基础 CSS 先保证单栏可读，查询支持时再增强为双栏；不要把核心内容只放进 @container 规则里。

/* 默认规则是旧环境也能使用的可读布局 */
.card {
  grid-template-columns: 1fr;
}

/* 用特性查询判断语法能力，不把 @media 当成替代检测 */
@supports (container-type: inline-size) {
  .card-shell {
    container-type: inline-size;
  }

  @container (min-width: 38rem) {
    .card {
      grid-template-columns: 12rem minmax(0, 1fr);
    }
  }
}

实际项目中可以先在宽度特别明显的条件下验证，例如把阈值暂时设为 10rem，确认规则确实能命中，再换回设计稿阈值。确认命中后，再检查 Grid 子项的最小内容尺寸；minmax(0, 1fr) 常常比裸写 1fr 更不容易被长标题撑破。

常见问题

container query 能替代所有 media query 吗？

不能。组件内部根据自身容器调整布局时用 container query；页面级导航、主题或设备能力仍适合 media query。

为什么写了 @container 但样式没有变化？

最常见是没有有效的尺寸查询容器，或者容器实际宽度没有达到条件。先看计算样式和容器宽度，再查选择器覆盖。

container-name 不写可以吗？

可以。无名查询会寻找最近的有效祖先；容器嵌套、组件来源复杂时建议命名，降低命中错误的概率。

把 container query 当成“组件观察父级空间”的工具，配置顺序就会清晰：先建容器，再写默认样式，然后加宽度规则，最后补能力检测。这样卡片无论被放进主栏、侧栏还是弹窗，都能按自己的可用空间工作。