CSS container-type 怎样让组件按容器尺寸响应

把container-type: inline-size设置在组件外层，再通过@container查询这个外层的行内尺寸，改变内部组件样式。外层负责提供尺寸，内部负责响应：同一张卡片放在窄侧栏或宽主栏时，就能分别采用不同排列，无需用整个浏览器窗口宽度判断。

参考文档地址：https://developer.mozilla.org/en-US/docs/Web/CSS/container-type

触发场景：组件进入不同宽度的布局区域

例如文档检索页面有主内容区和相关资料侧栏，同一种资料卡片在主区可以横向展示，在侧栏则需要纵向排列。窗口本身可能一直很宽，因此只写媒体查询，侧栏卡片仍可能被错误地排成两列。

这里把容器查询当成组件自己的响应规则：由布局区域变化触发，由容器名称限定作用范围，由基础样式提供默认展示。这不需要用户授权或JavaScript监听；它是浏览器依据CSS条件进行的样式计算。不要为了套用工作流术语而增加无关的权限或通知代码。

配置边界：外层容器与内部组件分开

先将下面HTML放入页面body。两个示例使用同一个组件结构，外层通过demo类模拟宽窄区域，真正的组件接入时可由父级Grid或Flex布局分配宽度。

  
参考资料
      
接口说明
查看字段含义与请求示例。
    

  
参考资料
      
组件规范
查看排版约定与内容要求。
    

外层不能依赖被查询后代的内容来决定行内尺寸，否则会产生循环依赖。inline-size建立行内尺寸包含，布局需要给它可靠的可用空间。普通块级元素在确定宽度的父级中通常可占满空间；在收缩到内容宽度的布局中，则需要特别注意尺寸来源。

响应规则：尺寸条件决定组件排列

将以下样式放在页面样式表中。40rem是这个演示组件的设计阈值，并非统一标准；在常见水平书写模式下，inline-size对应水平方向可用尺寸。

/* 演示宿主区域；实际项目通常由页面布局分配尺寸。 */
.demo { max-inline-size: 100%; margin-block: 1rem; }
.demo-narrow { inline-size: 24rem; }
.demo-wide { inline-size: 52rem; }
.resource-slot {
  container-type: inline-size;
  container-name: resource;
  min-inline-size: 0;
}
/* 默认单列，即使不支持容器查询也能阅读。 */
.resource-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  overflow-wrap: anywhere;
}
.resource-card h2 { margin-block: 0 0.5rem; }
.resource-card p { margin: 0; }
.resource-kind { color: #334155; }
/* 查询名为resource的祖先容器，修改其内部卡片。 */
@container resource (inline-size >= 40rem) {
  .resource-card {
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: start;
  }
}

container-name让查询明确寻找名为resource的合适祖先；不写名称时，会使用符合查询要求的最近祖先。在嵌套组件中命名能够减少意外读取另一层容器尺寸的问题。

当宽宿主实际可用尺寸至少40rem时，内部资料卡片改为两列；窄宿主保持单列。如果页面本身小于这些演示宽度，max-inline-size: 100%会限制宿主，宽示例也可能回到单列。判断依据是实际容器尺寸，不能只看类名叫不叫wide。

交付条件：保留可读的基础布局

inline-size下高度仍可随内容增长，适合文字卡片。size对尺寸包含的影响更强，若高度原本完全由子内容撑开，改用size可能导致预期之外的高度表现。只有确实要查询块轴尺寸，并已设计尺寸约束时才使用。

交付前读者可把同一组件放进侧栏、主栏和弹性面板，观察基础单列是否可读、阈值两侧是否符合布局要求、长标题是否溢出。这里没有运行页面或截取界面，也不声称已经通过浏览器测试。旧环境若忽略@container，基础样式仍应承担完整内容展示；具体支持范围应结合目标浏览器与参考文档兼容表决定。

失败处理：查询不生效时看哪些关系

查询未生效时，先确认被修改元素的祖先设置了container-type，再看名称是否一致、实际尺寸是否达到阈值，最后查看其他样式是否覆盖结果。容器自己的尺寸查询不能直接以自身作为查询容器来调整自己；常见做法就是示例中的外壳与内部组件分开。

若卡片在Flex或Grid中难以缩小，需要检查父级轨道、子项自动最小尺寸以及长内容。min-inline-size: 0和minmax(0, 1fr)用于允许相关区域合理收缩，但不能把它们当作所有溢出问题的通用修复。

container-type会自动改变组件布局吗？

不会，它建立查询上下文。具体如何调整布局由@container中的规则决定。

容器查询可以替代全部媒体查询吗？

页面整体布局和设备特征仍可用媒体查询；组件适配其所在区域时使用容器查询，两者可以配合。

需要窗口resize事件吗？

这个纯样式场景无需额外监听。父布局变化导致容器尺寸变化时，浏览器会重新计算相应条件。

官方与维护方参考：container-type属性、CSS容器尺寸查询。