CSS Container Queries：组件级响应式设计

长久以来，响应式设计都依赖于媒体查询（Media Queries）—— 基于视口宽度调整样式。但这有一个根本问题：组件不关心视口，它关心自己所在的容器有多大。

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 Queries 则轻而易举：

.article-card {
  container-type: inline-size;
}
/* 窄容器：垂直堆叠 */
.card-inner {
  display: flex;
  flex-direction: column;
}
/* 宽容器：水平排列 */
@container (min-width: 500px) {
  .card-inner {
    flex-direction: row;
    gap: 1.5rem;
  }
  
  .card-image {
    width: 200px;
    flex-shrink: 0;
  }
}

在 Tailwind CSS 中使用

Tailwind v3.2+ 原生支持 Container Queries：

  

    
    
...

  

Container Queries 是组件库设计的游戏规则改变者，强烈推荐迁移。