CSS Container Queries 终于来了：响应式设计的范式革命

做前端的都知道，Media Queries 统治响应式设计十几年了。但说实话，它有个根本性的问题：它只关心视口大小，不关心组件实际所在的容器有多宽。

这导致一个经典痛点——你写了一个漂亮的卡片组件，放在主内容区没问题，但往侧边栏一扔，布局直接崩了。因为视口没变，Media Query 不会触发。

Container Queries 解决了什么

简单说：让组件根据自己父容器的大小来决定样式，而不是看整个浏览器窗口。

/* 1. 声明容器 */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* 2. 根据容器宽度调整样式 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
  .card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
}

这段代码的意思是：当 .card-wrapper 宽度大于 400px 时，卡片用网格布局（图左文右）；小于 400px 时，改成垂直堆叠。

核心优势：同一个组件，不管放哪都能自适应。

container-type 的三种模式

值	含义
inline-size	只监听行内方向（通常是宽度），最常用
size	同时监听宽和高
normal	默认值，不创建容器上下文

实际开发中 90% 的场景用 inline-size 就够了。size 要慎用——它会阻止浏览器对高度的自动计算，可能导致布局问题。

Container Query Units（容器查询单位）

这是一个容易被忽略但非常强大的特性：

.card h2 {
  /* cqi = 容器 inline-size 的 1% */
  font-size: clamp(1rem, 4cqi, 2rem);
}

.card p {
  /* cqw = 容器宽度的 1% */
  padding: 2cqw;
}

可用单位包括 cqw、cqh、cqi、cqb、cqmin、cqmax，分别对应容器的不同维度。

实战：设计系统中的自适应组件

在真实项目中，Container Queries 最大的价值在于设计系统和组件库。

以前你可能需要为同一组件创建多个变体：CardSmall、CardMedium、CardLarge。现在只需要一个 Card，让它自己适配。

.dashboard-widget {
  container-type: inline-size;
}

/* 紧凑模式 */
@container (max-width: 250px) {
  .widget-content {
    font-size: 0.875rem;
  }
  .widget-chart { display: none; }
  .widget-number { font-size: 1.5rem; }
}

/* 标准模式 */
@container (min-width: 251px) and (max-width: 500px) {
  .widget-chart { height: 120px; }
}

/* 宽屏模式 */
@container (min-width: 501px) {
  .widget-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .widget-chart { height: 200px; }
}

浏览器兼容性（2026年）

好消息：所有主流浏览器已全面支持。Chrome 105+、Firefox 110+、Safari 16+。Can I Use 显示全球覆盖率已超过 95%。

可以放心在生产环境使用了。如果需要兼容老浏览器，用 @supports 做渐进增强：

@supports (container-type: inline-size) {
  .card-wrapper { container-type: inline-size; }
}

总结

Container Queries 不是一个小改进，而是响应式设计思维的根本转变——从「页面级响应」到「组件级响应」。

如果你还在用 Media Queries 控制组件在不同位置的表现，是时候切换了。写出来的代码更干净，组件真正实现了「放哪都能用」的目标。