CSS 容器查询实战：商品卡片如何按自身宽度自适应

同一张商品卡片放在首页双栏区域时可以正常铺开，放到侧边栏里可用空间就收窄很多，之前只用媒体查询做适配的话，判断逻辑完全绑定浏览器视口宽度，很容易出现文字无意义折行、按钮堆叠错位的问题。CSS 容器查询把判断依据从全局视口换成组件外层的可用空间，卡片就能完全跟着自己所处容器的实际尺寸自动切换布局。

先把容器设在组件边界上

要把容器属性声明在组件的直接布局父节点上，不要随手往页面根节点挂载。这样同一个组件不管复用在页面的哪个位置，适配逻辑都只会参照就近的父容器空间生效，不会被外层其他元素干扰。

.product-slot { container-type: inline-size; }
.product-card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
@container (max-width: 360px) {
  .product-card { grid-template-columns: 1fr; }
  .product-card img { width: 100%; }
}

断点来自内容，不是设备型号

你可以直接把装好标题、价格、操作按钮的完整组件，分别放到320px、360px、480px宽的测试容器里走一遍效果，当标题出现无意义的换行、按钮之间互相挤压、图片被强制拉伸压缩的时候，就是该切入适配规则的触发点。不用一口气堆一大堆断点，多数场景下只留一个明确的布局切换点，后续维护起来省心很多。

常见问题

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

不行。页面级别的全局导航、整站的栅格布局还是用媒体查询更顺手，只有独立可复用组件内部的局部空间适配，才是容器查询最适合的场景。

为什么规则没有触发？

先去检查目标元素的上层有没有正确声明容器类型属性，容器查询的适配规则永远只会参照离自己最近的、符合要求的父容器生效。

要测哪些页面场景？

至少覆盖首页主内容区、侧边栏、弹出层和嵌套卡片这几个典型场景，别只在单一的宽容器里测完就上线，很容易漏掉其他布局里的适配问题。

让组件对自己的空间负责

容器查询本质上不是让你多写一套基于设备的断点规则，而是把本该属于组件自己的布局权责收回到组件内部。先把容器边界定义清楚，再根据组件内容真正挤不开的位置设适配断点，最后放到不同的容器场景里回归校验一遍，后续跨场景复用组件的时候，能省掉大量写额外样式覆盖的冗余工作。