容器查询语法与使用

容器查询语法包含容器声明和条件规则两部分，掌握完整语法结构是正确使用的基础。

容器声明语法

container-type属性

.element {
  container-type: inline-size;
}

container-name属性

.element {
  container-name: my-container;
}

命名容器，用于精确查询。

container简写

.element {
  container: name / type;
}

/* 示例 */
.card-box {
  container: card / inline-size;
}

/* 分开写等效 */
.card-box {
  container-name: card;
  container-type: inline-size;
}

@container查询语法

基本结构

@container <condition> {
  /* 规则块 */
}

条件语法

/* 尺寸条件 */
@container (min-width: 300px) {}
@container (max-width: 500px) {}
@container (min-width: 300px) and (max-width: 500px) {}

/* 命名容器 */
@container card (min-width: 300px) {}

/* 方向条件（需要size类型） */
@container (orientation: portrait) {}
@container (orientation: landscape) {}

条件运算符

复合条件

/* 多条件组合 */
@container (min-width: 300px) and (orientation: landscape) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

/* 或条件 */
@container (min-width: 500px) or (min-height: 400px) {
  .card {
    padding: 24px;
  }
}

/* 否定条件 */
@container not (max-width: 200px) {
  .card__title {
    font-size: 18px;
  }
}

完整使用流程

1. 声明容器

.card-container {
  container: card / inline-size;
}

2. 编写基础样式

.card {
  display: block;
  padding: 12px;
  background: white;
  border-radius: 8px;
}

3. 编写容器查询

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

@container card (min-width: 500px) {
  .card {
    padding: 24px;
    gap: 20px;
  }

  .card__title {
    font-size: 24px;
  }
}

查询断点设计

推荐断点值

/* 常用断点 */
@container (min-width: 200px) {}  /* 紧凑 */
@container (min-width: 300px) {}  /* 标准 */
@container (min-width: 400px) {}  /* 中等 */
@container (min-width: 500px) {}  /* 宽松 */
@container (min-width: 600px) {}  /* 大型 */

断点变量管理

:root {
  --container-sm: 200px;
  --container-md: 300px;
  --container-lg: 500px;
}

/* 使用变量 */
@container (min-width: var(--container-md)) {
  /* */
}

查询范围模式

单断点递进

/* 逐级递进 */
@container (min-width: 200px) {
  /* 200px+ */
}

@container (min-width: 300px) {
  /* 300px+，覆盖部分200px样式 */
}

@container (min-width: 500px) {
  /* 500px+，继续覆盖 */
}

范围限定

/* 明确范围 */
@container (min-width: 200px) and (max-width: 299px) {
  /* 仅200-299px */
}

@container (min-width: 300px) and (max-width: 499px) {
  /* 仅300-499px */
}

@container (min-width: 500px) {
  /* 500px+ */
}

与媒体查询配合

分层查询

/* 页面布局：媒体查询 */
@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 250px 1fr;
  }
}

/* 组件样式：容器查询 */
.sidebar {
  container: sidebar / inline-size;
}

@container sidebar (min-width: 200px) {
  .nav-item {
    display: flex;
  }
}

全局状态组合

/* 深色模式 + 容器查询 */
@media (prefers-color-scheme: dark) {
  .card-container {
    container: card / inline-size;
  }

  @container card (min-width: 300px) {
    .card {
      background: #1a1a1a;
      color: #e0e0e0;
    }
  }
}

常用语法模式

移动优先

/* 基础样式（紧凑） */
.card {
  display: block;
}

/* 逐步增强 */
@container (min-width: 300px) {
  .card {
    display: flex;
  }
}

桌面优先

/* 基础样式（宽松） */
.card {
  display: flex;
  padding: 24px;
}

/* 逐步降级 */
@container (max-width: 499px) {
  .card {
    padding: 16px;
  }
}

@container (max-width: 299px) {
  .card {
    display: block;
    padding: 12px;
  }
}

状态切换

/* 布局模式切换 */
@container (min-width: 400px) {
  .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

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

语法完整示例

<div class="dashboard-panel">
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-card__icon"></div>
      <div class="stat-card__content">
        <h3 class="stat-card__title">用户数</h3>
        <p class="stat-card__value">1,234</p>
      </div>
    </div>
  </div>
</div>

/* 容器声明 */
.dashboard-panel {
  container: dashboard / inline-size;
}

.stats-grid {
  display: grid;
  gap: 16px;
}

/* 基础样式 */
.stat-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 6px;
}

.stat-card__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.stat-card__title {
  font-size: 14px;
  color: #666;
}

.stat-card__value {
  font-size: 24px;
  font-weight: 600;
}

/* 容器查询 */
@container dashboard (min-width: 500px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-card {
    padding: 16px;
  }
}

@container dashboard (min-width: 800px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .stat-card {
    padding: 20px;
  }

  .stat-card__icon {
    width: 50px;
    height: 50px;
  }

  .stat-card__value {
    font-size: 32px;
  }
}

要点总结

1. 容器声明：container: name / type或分开声明
2. 查询语法：@container [name] (condition) { rules }
3. 条件支持and、or、not运算符组合
4. 推荐移动优先：基础样式+min-width递进
5. 配合媒体查询实现页面级与组件级分层响应