CSS 容器查询怎样让卡片按父容器适配

把卡片外面的包装层声明为 container-type: inline-size，再用命名的 @container 查询包装层宽度，就能让同一张卡片在主栏横排、在窄侧栏竖排。查询依据是符合条件的祖先容器，不是整个浏览器窗口；被查询的包装层与改变布局的卡片应分开。

平台文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_queries。规范说明：https://drafts.csswg.org/css-conditional-5/。下面只讨论尺寸查询，不涉及样式查询或滚动状态查询；代码为原创示例，未进行浏览器实测。

迁移的是组件断点，不是整个页面布局

假设页面已有主栏和侧栏，两处共用 card 组件。旧代码按窗口宽度切换 card 的列数，在桌面宽屏下，两张卡片都会变成双列。但侧栏本身可能只有 280px，双列反而挤压正文。这里要改的是卡片自己的适配条件，页面是否分栏仍可以保留媒体查询。

不要把原来的宽屏卡片规则继续留在另一条媒体查询里。否则原规则可能因优先级或加载顺序覆盖容器规则，使迁移结果看起来不稳定。

三个声明分别负责什么

container-type: inline-size 让包装层成为可按行内尺寸查询的容器。示例使用横向书写模式，因此行内尺寸对应宽度。它带有尺寸包含等布局约束，不只是添加一个普通标记；父布局应负责分配包装层可用宽度。

container-name: card-slot 给查询目标一个名字。@container card-slot (min-width: 480px) 则针对符合名称、尺寸查询条件的祖先容器判断宽度，并对内部匹配选择器的元素应用声明。480px 是这个演示组件的设计断点，不是平台规定的推荐值。

把同一卡片放进两个不同宽度的包装层

将以下 HTML 和 CSS 配合使用即可表达完整结构。示例用普通文字块代替媒体图片，不依赖外部素材或脚本，也不把配图当成运行结果。

  
CSS
      
组件布局练习
父容器足够宽时采用双列，否则保留单列。
    

/* 基础样式即降级方案：不认识容器查询也能读完整内容 */
* { box-sizing: border-box; }
.demo {
  display: grid;
  gap: 24px;
  justify-items: start;
  font-family: sans-serif;
}
.slot { inline-size: 100%; min-inline-size: 0; }
.slot-wide { max-inline-size: 720px; }
.slot-narrow { max-inline-size: 280px; }
.card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid #bac5ce;
  border-radius: 12px;
}
.card-mark {
  display: grid;
  place-items: center;
  min-block-size: 96px;
  background: #e5eff7;
  color: #183e5b;
}
.card-body { min-inline-size: 0; overflow-wrap: anywhere; }
.card h2 { margin: 0 0 8px; font-size: 20px; }
.card p { margin: 0; line-height: 1.6; }

@supports (container-type: inline-size) {
  /* 包装层负责提供尺寸，内部卡片负责改变自己的布局 */
  .slot {
    container-type: inline-size;
    container-name: card-slot;
  }
  @container card-slot (min-width: 480px) {
    .card { grid-template-columns: 120px minmax(0, 1fr); }
  }
}

在足够宽的页面可用区域中，wide 包装层最多占 720px，narrow 最多占 280px。因此前者满足 480px 条件时显示双列，后者仍单列；当整个页面变窄时，两个包装层均可缩小。max-inline-size 并不保证容器总有这么宽，真正决定条件的是布局后实际可用的容器内容盒宽度。

需要更短的声明时，可把两条容器属性写成下面的简写；不要遗漏斜线后面的类型。

/* 与名称和类型的两条声明对应，供替换而非额外必需规则 */
.slot { container: card-slot / inline-size; }

命名查询不是任意选择一个同名节点

命名会参与祖先容器选择，不是 CSS ID，也不是在整个文档里寻找某一个节点。不同包装层可以都叫 card-slot，各自后代卡片使用对应的合格祖先。若在中间再插入一个同名且支持该尺寸查询的容器，它可能成为更近的匹配对象，外层宽度便不再是当前查询依据。

未命名的查询同样依赖符合条件的祖先。命名的价值是表达组件边界，减少意外查到其他容器的机会，但不会免除对嵌套结构的理解。

迁移前后值得核对的细节

不要期待一个元素根据自身作为容器的宽度来改变自身样式。此处 slot 承担被查询职责，card 承担样式变化职责，正是为了保持这个区别。仅设置名称而未建立适合的尺寸查询容器，也不足以支持这里的宽度条件。

另外，inline-size 不是双轴 size。只需要卡片横向适配时，不要为了“更全面”直接换成 size，再依赖内部内容自动撑高容器。尺寸包含会改变布局计算方式，尤其应留意依赖内容固有尺寸的布局和收缩包裹场景。

基础单列布局必须独立可读。示例把增强声明放进 @supports，不支持时就继续用基础样式；这不是承诺所有旧浏览器都实现精确相同的响应式效果。如果产品必须覆盖特定浏览器或内嵌 WebView，应按其实际支持范围制定发布条件，不能只看开发机。

迁移时可依次核对：原视口卡片断点是否已移除、包装层宽度是否由外部布局确定、是否误插同名中间容器、479px 与 480px 附近是否符合设计预期、长标题和较大字号下能否完整阅读。这些是给读者的回归观察点，本文没有声称已经执行这些操作。

常见疑问

为什么改窗口宽度却没看到卡片变化？

卡片观察的是包装层而非窗口。如果父布局让包装层一直保持同样宽度，窗口变化不一定触发断点切换。应看实际容器宽度和选中的祖先是否符合预期。

为什么容器已经很宽，卡片仍然单列？

先核对名字是否一致、包装层是否具备 inline-size 查询类型、选择器是否命中后代卡片，再看其他样式是否覆盖了列定义。还要确认测量的是容器内容盒，而非连外边距一起估算的区域。

媒体查询要全部删除吗？

不需要。页面级结构继续按视口适配，组件内部按容器适配，两者职责可以并存。迁移目标是让 card 不再依赖摆放位置，而不是让所有 CSS 条件都变成容器查询。