容器查询基础概念

容器查询（Container Queries）让组件能够根据父容器尺寸自适应样式，突破传统媒体查询的视口限制。

什么是容器查询

传统响应式设计基于视口宽度，容器查询基于父容器宽度。

媒体查询：视口宽度 → 元素样式变化
容器查询：容器宽度 → 子元素样式变化

核心解决的问题

传统媒体查询的局限

/* 媌体查询：基于视口 */
@media (min-width: 768px) {
  .card {
    display: flex;
  }
}

问题：同一组件在不同容器中表现不一致。

<!-- 宽容器中：卡片横向布局 -->
<div class="wide-container">
  <div class="card">...</div>
</div>

<!-- 窄容器中：期望纵向布局，但视口宽度不变 -->
<div class="sidebar">
  <div class="card">...</div>  <!-- 仍然横向布局，不合理 -->
</div>

容器查询的优势

/* 容器查询：基于容器 */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

组件根据所在容器自动调整样式。

基本工作流程

1. 定义容器 → container-type
2. 编写查询 → @container
3. 应用样式 → 响应式规则

最简示例

<div class="card-container">
  <div class="card">
    <img class="card__image" src="photo.jpg">
    <div class="card__content">
      <h3 class="card__title">标题</h3>
      <p class="card__text">描述文字</p>
    </div>
  </div>
</div>

/* 步骤1：声明容器 */
.card-container {
  container-type: inline-size;
}

/* 步骤2：容器查询 */
.card {
  display: block;
}

@container (min-width: 300px) {
  .card {
    display: flex;
    gap: 16px;
  }

  .card__image {
    width: 120px;
  }
}

@container (min-width: 500px) {
  .card__title {
    font-size: 24px;
  }

  .card__text {
    font-size: 16px;
  }
}

关键术语

与媒体查询对比

要点总结

1. 容器查询基于父容器尺寸而非视口尺寸
2. 核心价值：组件级响应式设计
3. 基本流程：定义容器 → 编写查询 → 应用样式
4. 解决传统媒体查询的组件复用问题