CSS Container Queries：基于父容器的响应式设计

CSS Container Queries 是一项革命性特性，允许元素根据其父容器的尺寸（而非视口尺寸）动态调整样式。这解决了传统媒体查询的局限性，实现了更细粒度的组件级响应式设计。

核心概念

1. 容器类型定义
   通过 container-type 声明可查询的容器维度：

   .parent {
     container-type: inline-size;  /* 响应宽度变化 */
     container-type: size;         /* 响应宽高变化 */
   }
   

2. 容器查询语法
   使用 @container 规则监听父容器尺寸：

   @container (min-width: 500px) {
     .child {
       grid-template-columns: repeat(3, 1fr);
     }
   }
   

完整示例

<div class="card-container">
  <div class="card">
    <img src="thumbnail.jpg">
    <h3>标题</h3>
    <p>描述文本...</p>
  </div>
</div>

<style>
.card-container {
  container-type: inline-size;
}

/* 窄容器：垂直布局 */
.card {
  display: flex;
  flex-direction: column;
}

/* 宽容器：水平布局 */
@container (min-width: 500px) {
  .card {
    flex-direction: row;
    gap: 1rem;
  }
}

/* 超宽容器：网格布局 */
@container (min-width: 800px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}
</style>

应用场景

1. 可复用组件
   同一组件在不同容器中自动适配布局（如侧边栏 vs 主内容区）
2. 动态内容区域
   拖拽调整容器大小时实时更新子元素样式
3. 响应式栅格
   根据容器宽度智能调整列数：
   $$ \text{列数} = \left\lfloor \frac{\text{容器宽度}}{\text{列基准值}} \right\rfloor $$

优势对比

浏览器支持：Chrome≥105、Firefox≥110、Safari≥16（需前缀 @supports (container-type: inline-size) 检测）

通过容器查询，开发者能创建真正自适应的UI组件，大幅提升代码复用率和可维护性。