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

1. 基本概念

传统响应式设计依赖视口尺寸（媒体查询），而容器查询允许组件根据直接父容器的尺寸动态调整样式。例如：

/* 定义容器 */
.card-container {
  container-type: inline-size; /* 监测内联尺寸 */
}

/* 容器查询 */
@container (min-width: 400px) {
  .card {
    grid-template-columns: 1fr 2fr; /* 宽容器时双列布局 */
  }
}
@container (max-width: 399px) {
  .card {
    grid-template-columns: 1fr; /* 窄容器时单列布局 */
  }
}

2. 核心优势

• 组件级响应：独立组件自适应父容器，不受全局视口限制
• 复用性提升：同一组件在不同尺寸容器中自动匹配最佳样式
• 布局解耦：避免传统媒体查询导致的组件样式连锁修改

3. 使用步骤

1. 声明容器：

   .parent {
     container-type: size;       /* 监测宽高 */
     container-name: sidebar;   /* 命名容器（可选） */
   }
   

   • 可用值：size（宽高）| inline-size（宽度）| block-size（高度）

2. 编写查询：

   @container sidebar (min-width: 500px) {
     .child { font-size: 1.2rem; }
   }
   

4. **实际应用示例

<div class="widget-container">
  <div class="weather-widget">...</div>
</div>

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

/* 窄容器：垂直布局 */
@container (max-width: 300px) {
  .weather-widget {
    flex-direction: column;
    padding: 8px;
  }
}

/* 宽容器：水平布局 */
@container (min-width: 301px) {
  .weather-widget {
    flex-direction: row;
    padding: 16px;
  }
}
</style>

5. 注意事项

• 浏览器兼容性：需 Chromium 105+ / Firefox 110+ / Safari 16+（2023年主流浏览器已支持）
• 容器类型限制：
  • inline-size 仅监测宽度（最常用）
  • size 需明确声明高度，可能引发布局循环
• 性能优化：避免深层嵌套容器查询

6. 与传统媒体查询对比

特性	容器查询	媒体查询
作用对象	父容器尺寸	视口尺寸
组件独立性	✅ 样式与容器绑定	❌ 全局作用
可复用性	✅ 组件随处插入自适应	⚠️ 需重复适配不同场景
代码维护	✅ 修改容器即更新所有子组件	❌ 需逐个修改组件

应用场景：仪表盘小部件、卡片式布局、自适应侧边栏等需要动态嵌入不同尺寸区域的组件设计。