CSS Container Queries 实战指南

什么是 Container Queries？

Container Queries 允许你基于容器的大小而不是视口大小来应用样式。这是实现真正的组件级响应式的关键。

基本语法

/* 定义容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 容器查询 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

实际案例

响应式卡片组件

<div class="card-container">
  <div class="card">
    <img src="photo.jpg" alt="Photo" />
    <div class="card-content">
      <h2>标题</h2>
      <p>描述文字</p>
    </div>
  </div>
</div>

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

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container (min-width: 350px) {
  .card {
    flex-direction: row;
  }
  
  .card img {
    width: 150px;
    height: 150px;
  }
}

@container (min-width: 600px) {
  .card {
    padding: 2rem;
  }
  
  .card-content h2 {
    font-size: 1.5rem;
  }
}

Container Queries vs Media Queries

特性	Container Queries	Media Queries
基于	容器大小	视口大小
组件复用	✅	❌
浏览器支持	较新	广泛

浏览器兼容性

现代浏览器（Chrome 105+, Safari 16+, Firefox 110+）均已支持 Container Queries。

总结

Container Queries 让组件真正变得独立和可复用，是构建设计系统的理想选择。