CSS 容器查询：组件驱动的响应式设计

容器查询与媒体查询

媒体查询响应视口。容器查询响应组件自身的容器。

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card { display: block; }

@container card (min-width: 400px) {
  .card { display: flex; gap: 1rem; }
  .card__image { width: 200px; }
}

@container card (min-width: 700px) {
  .card__image { width: 300px; }
}

容器查询单位

.text {
  font-size: clamp(1rem, 2.5cqi, 1.5rem); /* 容器内联尺寸的 1% */
}

样式查询

.sidebar { container-type: style; --density: compact; }

@container style(--density: compact) {
  .item { padding: 0.25rem; font-size: 0.875rem; }
}

响应式网格

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

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

支持：Chrome 105+、Firefox 110+、Safari 16+。

-> 使用颜色转换器转换 CSS 颜色。