容器查询单位（cqw, cqh, cqi, cqb, cqmin, cqmax）

容器查询单位相对于容器尺寸计算，而非视口，让组件内部尺寸随容器自适应。

单位定义

单位详解

cqw与cqh

.container {
  container-type: size;
  width: 400px;
  height: 300px;
}

.child {
  width: 50cqw;   /* 400px × 50% = 200px */
  height: 100cqh; /* 300px × 100% = 300px */
}

cqi与cqb

内联和块级方向取决于书写模式。

/* 水平书写模式（默认） */
.container {
  container-type: inline-size;
  writing-mode: horizontal-tb;
}

.child {
  width: 50cqi;  /* 内联方向=宽度，即容器宽度的50% */
  height: 50cqb; /* 块级方向=高度，即容器高度的50% */
}

/* 垂直书写模式 */
.container-vertical {
  writing-mode: vertical-rl;
  container-type: inline-size;
}

.child-vertical {
  width: 50cqi;  /* 内联方向=高度，即容器高度的50% */
  height: 50cqb; /* 块级方向=宽度，即容器宽度的50% */
}

cqmin与cqmax

.container {
  container-type: size;
  width: 400px;
  height: 300px;
}

.square-box {
  /* 取较小值的百分比，保持正方形不溢出 */
  width: 100cqmin;  /* min(400, 300) × 100% = 300px */
  height: 100cqmin; /* 300px × 300px 正方形 */
}

.expand-box {
  /* 取较大值的百分比 */
  width: 50cqmax;   /* max(400, 300) × 50% = 200px */
}

使用前提

容器必须声明container-type。

/* cqw/cqh需要size类型 */
.full-container {
  container-type: size;  /* 查询宽度和高度 */
}

/* cqi只需inline-size类型 */
.inline-container {
  container-type: inline-size;  /* 只查询内联尺寸 */
}

实际应用

自适应字体大小

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

.card__title {
  /* 字体随容器宽度缩放 */
  font-size: 5cqi;  /* 容器宽度的5% */
}

/* 容器400px → 字体20px */
/* 容器200px → 字体10px */

自适应间距

.panel-container {
  container-type: size;
}

.panel {
  padding: 2cqw 3cqh;  /* 水平间距基于宽度，垂直间距基于高度 */
}

保持比例的元素

.media-container {
  container-type: size;
}

.aspect-box {
  /* 基于容器最小边保持比例 */
  width: 80cqmin;
  height: 80cqmin;
  /* 总是正方形，且不超出容器 */
}

响应式图标尺寸

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

.icon {
  width: 10cqi;
  height: 10cqi;
  /* 图标随容器缩放 */
}

与视口单位对比

复合计算

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

/* 基础尺寸 + 容器相对值 */
.title {
  font-size: calc(16px + 2cqi);
}

/* 固定比例计算 */
.image {
  width: 100cqi;
  height: calc(100cqi * 0.75);  /* 4:3比例 */
}

注意事项

容器单位需要容器实际有明确尺寸，无尺寸容器可能导致单位为0。

/* 问题：无尺寸容器 */
.auto-container {
  container-type: inline-size;
  width: auto;  /* 尺寸不明确 */
}

.child {
  width: 50cqi;  /* 可能为0 */
}

要点总结

1. cqw/cqh：容器宽/高度的1%
2. cqi/cqb：内联/块级尺寸的1%，适应书写模式
3. cqmin/cqmax：取较小/较大尺寸的1%
4. 使用单位前必须声明container-type
5. cqi只需inline-size，其他需要size类型