CSS container queries按组件宽度适配卡片布局

CSS container queries 解决的是一个很具体的组件问题：卡片被放进侧栏时应该是上下结构，放进主内容区时可以变成图片加正文并排，但它不应该关心页面视口到底有多宽。做法是给卡片外层设置 container-type: inline-size，再用 @container 查询这个外层的宽度；媒体查询负责页面级布局，容器查询负责组件级布局。

先把卡片宿主变成查询容器

下面的示例把 .card-shell 当作组件宿主，卡片本身只描述内容，不绑定页面栅格。inline-size 适合横向书写模式下的宽度查询，并且比 size 少引入一个不必要的块尺寸约束。

      
组件化布局
      
卡片内容可以放进不同宽度的父级。
    
  

/* 宿主负责提供可被查询的内联尺寸 */
.card-shell {
  container: product-card / inline-size;
}

/* 默认样式先保证窄容器中的内容可读 */
.product-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.product-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

container 是 container-name 与 container-type 的简写。查询规则写在同一份组件 CSS 中，组件换宿主时不需要重新计算视口断点。

用 @container 按组件宽度切换卡片布局

宽容器达到 560px 时，才让图片和文字并排。阈值描述的是卡片自身的可用宽度，不是设备宽度；因此同一规则放进 320px 的侧栏时不会误触发。

/* 只在名为 product-card 的容器足够宽时改变后代布局 */
@container product-card (width >= 560px) {
  .product-card {
    grid-template-columns: minmax(140px, 0.8fr) 1.2fr;
    align-items: center;
  }

  .product-card__body {
    padding-inline: 0.5rem 1rem;
  }
}

如果页面不需要多个嵌套容器，也可以省略名称写成 @container (width >= 560px)，浏览器会寻找最近的合格容器。命名更适合组件库：它把查询对象写清楚，也降低外层布局改动带来的误匹配。

嵌套组件要守住容器边界

真实页面常有“页面主栏—卡片列表—卡片内容”多层嵌套。无名称查询会向上寻找最近的合格容器；如果外层也设置了容器类型，规则可能命中与卡片设计无关的边界。解决办法是给组件宿主使用稳定名称，并把阈值写成组件能承受的内容宽度。

/* 外层页面容器与卡片容器各自承担不同职责 */
.content-column {
  container: page-column / inline-size;
}

.card-shell {
  container: product-card / inline-size;
}

/* 明确查询 product-card，而不是最近的 page-column */
@container product-card (width >= 560px) {
  .product-card {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

不要把所有断点都从媒体查询机械搬到 @container。页面导航、整页留白仍然适合媒体查询；卡片列数、标题字号和操作区排列才是容器查询的职责。验收时至少把同一组件放进窄侧栏、宽主栏和带内边距的弹窗，确认它们分别保持单列、并排和不溢出。

相关问题

为什么写了 @container 却没有生效？

先检查祖先是否真的设置了 container-type: inline-size 或 container 简写，再确认查询规则作用于容器的后代，而不是容器自身。

inline-size 和 size 该怎么选？

只按横向宽度调整卡片时优先用 inline-size；只有确实需要同时查询块尺寸，并且能接受尺寸包含边界时再考虑 size。

容器查询能完全替代媒体查询吗？

不能。媒体查询适合页面或设备级决策，container queries 适合可复用组件的局部布局，两者配合更容易维护。