CSS 容器查询怎样按组件宽度切换布局

同一个卡片组件放进主内容区和窄侧栏时，布局不应该继续猜测视口宽度。CSS 容器查询的做法是：先在组件外层设置 container-type: inline-size，再用 @container 读取这个外层的可用宽度；宽度达到阈值时切换为双列，未达到时保持单列。这样组件只关心自己的容器，嵌入位置变化也不必改写组件样式。

先建立组件自己的宽度观察点

媒体查询观察的是视口，容器查询观察的是祖先容器。最小配置只需要两件事：给组件外壳建立查询上下文，再给内部元素写条件样式。下面的默认规则故意采用单列，这样即使浏览器不认识 @container，内容也能正常阅读。

    

    

      
接口延迟趋势
      
组件可以放在主栏或侧栏中。
    
  

/* 只查询横向空间，避免卡片高度变化反过来影响自身布局 */
.card-shell {
  container-type: inline-size;
  container-name: card-shell;
}

/* 窄容器是兼容默认值：内容先纵向排列 */
.card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* 容器达到阈值后切换为图文两列，而不是等待视口变宽 */
@container card-shell (width >= 420px) {
  .card {
    grid-template-columns: 9rem 1fr;
    align-items: start;
  }
}

这里把 container-name 写出来，是为了让规则意图更清楚。若页面只有一个查询容器，也可以省略名字，使用 @container (width >= 420px)。无名查询会向祖先查找最近的、类型匹配的查询容器；当组件嵌套在多个布局壳层里时，命名通常更容易维护。

用阈值表达组件任务，而不是照搬设备断点

阈值应该回答“卡片有多少横向空间后适合双列”，而不是回答“屏幕是不是平板”。例如头像、标题和摘要在 420px 以上仍能保持可读，就把 420px 作为组件断点。组件被放入 320px 侧栏时继续单列，被放入 640px 主栏时自然变成双列。

多层布局下锁定真正负责布局的容器

实际页面常有“页面网格—卡片列表—卡片”三层。若中间层也声明了查询容器，无名规则可能命中它，而不是页面网格。可以用简写属性把名字和类型放在一起，并让组件内部只引用这个名字：

/* 组件列表是布局责任边界，命名后不会误读页面外壳 */
.results-grid {
  container: results-grid / inline-size;
}

/* 只对 results-grid 的宽度做判断，内部的其他容器不参与 */
@container results-grid (width >= 720px) {
  .result-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 超窄状态仍由默认值提供，不依赖查询规则才能显示内容 */
.result-card {
  min-width: 0;
  overflow-wrap: anywhere;
}

兼容与排查：先看容器有没有可用尺寸

容器查询规则不生效时，优先检查外壳是否真的获得宽度，而不是先把阈值改成更小。块级元素通常会从父布局获得宽度；如果一个元素同时受到尺寸 containment 影响又没有上下文或显式尺寸，它可能塌缩，查询自然无法得到预期结果。

/* 不支持容器查询时保留普通布局，并把增强规则隔离 */
.card {
  display: block;
}

@supports (container-type: inline-size) {
  .card-shell {
    container-type: inline-size;
  }

  @container (width >= 420px) {
    .card {
      display: grid;
      grid-template-columns: 9rem 1fr;
    }
  }
}

@supports 不是必须的，但对需要兼容旧浏览器的项目更直观。检查清单可以固定为：外壳是否设置了 inline-size 或 size；查询是否写在被查询容器的后代规则上；宽度是否来自父布局而不是自身内容；命名是否拼写一致；默认样式是否已经能承载窄屏内容。

常见问题

容器查询和媒体查询应该二选一吗？

不必。媒体查询适合页面级导航、整体间距和设备能力，容器查询适合可复用组件的内部布局；两者可以在同一页面分工。

为什么写了 @container 但没有任何变化？

最常见原因是祖先没有设置匹配的 container-type，或者元素没有获得稳定宽度。先确认外壳的实际布局宽度，再确认查询选择器命中了它的后代。

什么时候使用 container-type: size？

只有在查询同时需要内联和块尺寸、方向或纵横比时才考虑 size。普通横向响应优先用 inline-size，这样 containment 范围更小，组件约束也更容易解释。

把断点从“设备宽度”改成“组件可用宽度”，容器查询就不只是新语法：它让组件在主栏、侧栏和网格中保持同一套可复用规则。落地时先写窄容器默认样式，再补一个有明确任务依据的阈值，最后用命名容器锁住布局责任边界。