CSS 容器查询实现响应式卡片：container-type 与 @container 的最小配方

商品卡片从主内容区搬到侧栏后，最容易出问题的不是颜色不对，而是布局直接错位：标题挤成三行叠在一起，价格和按钮互相顶开，图片还保持着宽屏比例硬塞。只写 @media 时，组件只能感知浏览器窗口尺寸，完全不知道自己在页面中实际拿到了多少可用空间。CSS 容器查询正好解决这个痛点：先用 container-type: inline-size 声明查询容器，再用 @container 根据卡片外层的实际宽度切换适配样式。

为什么媒体查询会让同一张卡片失去弹性

假设页面有三种典型摆放场景：主栏宽度约 960px，右侧推荐栏只有 300px，抽屉打开后卡片的可用宽度又可能变成 520px。下面这条规则看起来逻辑通顺，却直接把组件和页面布局绑死了：

@media (min-width: 900px) {
  .product-card {
    grid-template-columns: 160px 1fr auto;
  }
}

浏览器窗口达到 1200px 时，侧栏里的窄卡片也会自动套用三列布局；窗口只有 700px 时，主栏里明明放得下横向宽卡片，却只能继续显示单列。问题根本不在断点数值设置得不对，而在判断参考对象选得错了。

容器查询的判断逻辑更直接：卡片组件的外层声明为查询容器，组件内部的 @container 只读取最近的合格祖先的宽度。后续把组件放到不同父级容器里时，适配样式不用跟着页面布局反复复制修改。

先写一份能直接跑通的最小容器查询配方

下面的 HTML 故意写得很精简，重点是给卡片留出一个稳定的包裹层。真实项目里，这个包裹层可以是列表项、侧栏模块或者弹窗内容区。

    

      
轻量缓震跑鞋
      
适合日常通勤与短距离慢跑
      ¥299
      加入购物车
    
  

.product-shell {
  container-type: inline-size;
}

.product-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dfe5ec;
  border-radius: 14px;
  background: #fff;
}

.product-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

@container (min-width: 420px) {
  .product-card {
    grid-template-columns: 132px 1fr;
    align-items: center;
  }
}

@container (min-width: 680px) {
  .product-card {
    grid-template-columns: 160px 1fr auto;
  }
}

这里有两个需要确认的细节。第一，container-type 要写在被查询的祖先元素上，而不是写在 @container 内部。第二，卡片本身必须是查询目标元素的后代；如果把容器声明和查询规则放到同一个元素上，大概率会遇到断点完全不触发的问题。

用 minmax 和 clamp 把卡片从“跳变”变成“渐进”

容器查询适合切换整体布局状态，但不用把所有尺寸调整都拆成离散断点。图片列宽可以交给 minmax() 处理，标题字号交给 clamp() 控制，这样 420px 到 680px 区间里的布局变化不会出现生硬的跳变。

@container (min-width: 420px) {
  .product-card {
    grid-template-columns: minmax(112px, 28cqi) 1fr;
  }

  .product-info h3 {
    font-size: clamp(1rem, 2.8cqi, 1.35rem);
  }
}

@container (min-width: 680px) {
  .product-card {
    grid-template-columns: minmax(140px, 180px) 1fr auto;
  }
}

cqi 是容器查询专属的长度单位，表示查询容器内联轴尺寸的百分比。它适合做轻微的比例调整，不要用它替代所有断点：按钮是否独占一行、信息列是否显示这些核心布局判断，仍然应该由清晰的条件规则决定。

按钮、长标题和侧栏宽度的三个适配变体

按钮需要在窄卡片里占满一行

不要用 JS 读取宽度再动态切换 class。把按钮放入信息区容器，窄容器保持基础单列布局，宽度到 420px 后再让价格和按钮并排显示：

.product-info {
  display: grid;
  gap: 8px;
}

.product-info button {
  width: 100%;
}

@container (min-width: 420px) {
  .product-info {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .product-info h3,
  .product-info p {
    grid-column: 1 / -1;
  }

  .product-info button {
    width: auto;
  }
}

长标题不要把卡片高度推得失控

响应式只负责空间分配，不会替你决定标题要不要截断。商品名称属于核心用户信息，优先保留完整内容；如果业务要求所有卡片必须等高，可以给标题设置两行行数限制，再把完整标题放到可访问的 tooltip 提示里。

.product-info h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

命名容器避免嵌套时读错宽度

组件嵌套在复杂布局里时，可以给外层容器单独命名。命名不是必填操作，但能让适配规则的表意更明确：

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

@container product-card (min-width: 420px) {
  .product-card {
    grid-template-columns: 132px 1fr;
  }
}

兼容性和调试时最容易漏掉的坑

兼容性策略很朴素：先让单列卡片内容可读、图片不溢出、按钮可正常点击，再用容器查询做布局增强。不要把关键内容、核心操作入口只放在容器查询规则里。需要支持老旧内核时，可以先用原有媒体查询提供一个粗粒度适配版本，现代浏览器再用容器查询做组件级的精细化调整。

把配方收成一个可复用的完整片段

下面这段代码适合直接放进组件样式文件。它没有绑定全局页面宽度，卡片放到主栏、侧栏或弹窗里时，都会参照自己的容器尺寸重新判断适配规则。

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

.product-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #dfe5ec;
  border-radius: 14px;
  background: #fff;
}

.product-card > img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@container product-card (min-width: 420px) {
  .product-card {
    grid-template-columns: minmax(112px, 28cqi) 1fr;
    align-items: center;
  }
}

@container product-card (min-width: 680px) {
  .product-card {
    grid-template-columns: minmax(140px, 180px) 1fr auto;
  }
}

验收适配效果时不要只拖浏览器窗口测试。把同一个组件分别放进 300px 侧栏、520px 弹窗和 960px 主栏，逐一观察标题、价格、按钮和图片四个区域的表现。只要它们在不同父级下都保持正常可读，这个组件就真正摆脱了全局页面断点的限制。

常见问题

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

不能。媒体查询适合处理页面级导航、整体留白和视口方向这类全局逻辑；容器查询适合组件根据父级空间自动变化。两者可以并存，核心原则是不要让组件内部逻辑直接依赖页面视口宽度。

为什么写了 @container 还没有任何样式变化？

最常见的原因是没有给对应祖先声明 container-type，或者查询对象不是该容器的后代。先在开发者工具里确认包裹层的实际宽度，再检查它的计算样式里是否存在 container-type: inline-size。

必须给每个容器都写名字吗？

不必须。页面布局简单时直接使用最近的合格容器就足够了；嵌套卡片、面板较多的场景下，使用 container 简写命名可以大幅降低规则误匹配的风险。

cqi 在所有浏览器里都可以放心使用吗？

它属于容器查询配套的长度单位，使用前应结合项目的浏览器支持范围做验证。若兼容边界要求较宽，可以把它作为增强值使用，同时保留明确的像素尺寸和基础兜底布局。

最后的检查清单

• 容器声明写在组件外层，查询规则作用于内部后代。
• 默认样式在没有容器查询时也能显示完整内容和可操作按钮。
• 至少用 300px、520px、960px 三种真实父级宽度检查一次适配效果。
• 长标题、图片最小宽度和按钮换行都做过边界测试。
• 媒体查询负责页面级变化，容器查询负责组件级变化。