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

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

传统响应式设计依赖于视口尺寸（媒体查询），而容器查询允许组件根据其直接父容器的尺寸变化自适应样式。这使组件能真正实现"一次开发，随处复用"，无需预先知道具体布局环境。

核心概念

1. 容器定义
   通过 container-type 属性声明容器：

   .parent {
     container-type: inline-size; /* 监听宽度变化 */
     container-name: card-container; /* 命名容器（可选） */
   }
   

2. 查询规则
   使用 @container 根据容器尺寸应用样式：

   @container (min-width: 400px) {
     .child {
       grid-template-columns: 1fr 2fr; /* 容器宽度≥400px时切换布局 */
     }
   }
   

完整示例

<div class="card-container">
  <div class="card">
    <img src="thumbnail.jpg">
    <h3>卡片标题</h3>
    <p>描述内容...</p>
  </div>
</div>

.card-container {
  container-type: inline-size; /* 声明为宽度容器 */
}

/* 窄容器：垂直布局 */
@container (max-width: 350px) {
  .card {
    display: block;
    padding: 1rem;
  }
  .card img {
    width: 100%;
  }
}

/* 宽容器：水平布局 */
@container (min-width: 351px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.5rem;
  }
}

优势场景

1. 组件复用性
   同一卡片组件在不同容器中自动适配：

   • 侧边栏窄容器 → 垂直布局
   • 主内容宽容器 → 水平布局

2. 隔离式开发
   组件样式仅依赖父容器尺寸，不受全局布局影响

3. 动态响应
   实时响应容器尺寸变化（如拖拽调整侧边栏宽度）

浏览器支持

2023年起主流浏览器全面支持，兼容方案：

@supports (container-type: inline-size) {
  /* 容器查询样式 */
}

实践建议：结合传统媒体查询（整体布局）和容器查询（组件级适配），构建分层响应式系统。