CSS Container Queries 完全指南

什么是 Container Queries？

传统媒体查询（@media）依赖视口宽度，无法满足"组件根据父容器大小自适应"的需求。CSS Container Queries 解决了这个问题。

基本用法

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

与媒体查询的对比

浏览器支持

目前主流浏览器均已支持，可放心投入生产使用。

最佳实践

将 container-type 设置在包裹层而非组件本身，避免自引用问题。