容器查询

约 360 字大约 1 分钟

布欧-Lewyon

2026-05-16

容器查询根据容器自身大小而非视口大小应用样式，是真正的"组件级响应式"。

基础用法

/* 定义容器 */
.card-container {
  container-type: inline-size;  /* 按容器的内联方向尺寸查询 */
  container-name: card;         /* 命名 */
}

/* 容器查询 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

container-type

值	作用
`inline-size`	仅按内容宽度查询（常用）
`size`	按宽度和高度查询（会创建新层叠上下文）
`normal`	不创建容器

容器查询单位

.card {
  /* 相对于容器尺寸 */
  width: 50cqw;      /* 容器宽度的 50% */
  height: 30cqh;     /* 容器高度的 30% */
  font-size: 5cqi;   /* 容器内联尺寸的 5% */
  padding: 2cqmin;   /* 容器较小边的 2% */
  margin: 3cqmax;    /* 容器较大边的 3% */
}

vs 媒体查询

对比	媒体查询	容器查询
参考	视口	父容器
复用	组件在不同位置表现不同	组件自包含，到处一致
适用	页面整体布局	可复用组件

小结

属性	作用
`container-type`	定义容器查询类型
`container-name`	命名容器
`@container`	容器查询规则
`cqw` / `cqi` 单位	容器查询相对单位

上一节：媒体查询与断点下一节：视口单位与流式排版