CSS 容器查询：响应式布局新范式

1. 核心概念

容器查询（Container Queries）是 CSS 的新特性，允许组件根据直接父容器的尺寸动态调整样式，而非传统媒体查询依赖的视口尺寸。这实现了真正的模块化响应式设计，满足公式： $$ \text{组件样式} = f(\text{容器尺寸}) $$

2. 与传统媒体查询对比

特性	媒体查询	容器查询
依赖对象	视口（viewport）	父容器（container）
作用范围	全局布局	独立组件
代码维护	分散在不同组件中	封装在组件内部
适用场景	整体页面重构	微件（Card/Sidebar等）

3. 基础语法

步骤 1：定义容器

.component-parent {
  container-type: inline-size; /* 监控内联尺寸（宽度） */
  container-name: sidebar;    /* 可选命名 */
}

步骤 2：查询容器尺寸

@container sidebar (max-width: 600px) {
  .child-element {
    flex-direction: column;
    font-size: 0.8rem;
  }
}

4. 实际应用场景

• 卡片组件：同一页面中，宽容器内显示横排版，窄容器内切换竖排
• 导航栏：侧边栏收缩时自动隐藏文字标签，仅保留图标
• 网格系统：根据容器宽度动态调整列数（无需 JavaScript）

@container (width > 800px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}
@container (400px <= width <= 800px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

5. 浏览器支持与兼容方案

• 支持度：Chrome/Safari/Firefox 已原生支持（2023+）
• 渐进增强方案：

  /* 传统媒体查询兜底 */
  @media (max-width: 600px) { 
    .fallback { ... } 
  }
  
  /* 容器查询优先 */
  @supports (container-type: inline-size) {
    @container (max-width: 600px) { ... }
  }
  

6. 最佳实践

1. 容器命名原则：使用语义化命名（如 --card-container）
2. 避免过度查询：仅在关键断点触发样式变更
3. 结合 CSS 变量：提升代码复用性

   :root { --responsive-padding: 1rem; }
   
   @container (width < 500px) {
     .component { padding: var(--responsive-padding); }
   }
   

演进意义：容器查询将响应式设计从「页面级」推向「组件级」，解决了媒体查询在复杂布局中的耦合性问题。随着主流浏览器全面支持，它正成为现代 Web 开发的标准范式。