前端与浏览器 / 进阶

容器查询：让组件响应自己的空间

使用尺寸与样式容器查询构建可复用卡片，并解释容器单位、命名和渐进增强。响应式组件不该总猜测自己位于哪个视口断点。

7 分钟Container Queries · CSS · Responsive Design · cq Units

查询边界要来自内容

不要机械复制 768px、1024px 等页面断点。拖动容器，找到组件内容开始拥挤或留白失衡的位置，再把它设为边界。 cqi 表示查询容器内联尺寸的 1%，适合在合理上下限之间做连续缩放；必须结合 clamp，避免极端尺寸。

EXAMPLE / 01Container Queries

.card-region {
  container: card / inline-size;
}

.product-card {
  display: grid;
  gap: 1rem;
}

@container card (min-width: 36rem) {
  .product-card {
    grid-template-columns: minmax(10rem, 2fr) 3fr;
    align-items: center;
  }
}

.product-card__title {
  font-size: clamp(1rem, 4cqi, 1.75rem);
}

把实现拆成可验证的小块

断点应由内容何时失衡决定

最后回到真实页面检查

命名容器能减少复杂嵌套中的误匹配