容器查询可不仅仅是@container

在之前对于容器查询的简单理解中感觉他是和媒体查询类似的

@container (min-width: 200px) {
	.card {
		font-size: 1rem;
	}
}
@container (min-width: 400px) {
	.card {
		font-size: 1.2rem;
	}
}
@container (min-width: 800px) {
	.card {
		font-size: 2rem;
	}
}

详细了解一番之后发现，对于容器查询，他也有类似于 vw vh 这样的单位

容器查询有 6 中容器查询单位对应 vh vw

cqi 查询容器行向尺寸的 1%
cqw 查询容器宽度的 1%
cqb 查询容器块尺寸的 1%
cqh 查询容器高度的 1%
cqmin cqi 和 cqb 中较小的值
cqmax cqi 和 cqb 中较大的值

cq 的意思就是 container query

wow 这也太酷了知道父元素的大小对于很多动画来说非常有用，可以更容易的控制元素的变换距离

@keyframes slidein {
  from {
    transform: translateX(100cqw);
  }

  to {
    transform: translateX(0);
  }
}

和 vw 类似，这些单位也可以简化代码，并且更容易的创建响应式代码

.card {
	font-size: clamp(1rem, 3cqw , 2rem);
}

我们可以用 cqw 简化多次的书写媒体查询，并且使用 clamp 函数来指定文字大小的上下限，这对于不同分辨率的优化很有效果

more#

查询宽度

/* 定义容器 */
.container {
  container-type: size;
}

/* 使用容器查询，当容器宽度大于等于300px时，应用样式 */
@container (min-width: 300px) {
  .element {
    /* 样式 */
  }
}

查询宽高比

/* 定义容器 */
.container {
  container-type: aspect-ratio;
  aspect-ratio: 16 / 9; /* 定义宽高比为16:9 */
}

/* 使用容器查询，当容器的宽高比大于等于16:9时，应用样式 */
@container (aspect-ratio >= 16 / 9) {
  .element {
    /* 样式 */
  }
}

查询方向

/* 定义容器 */
.container {
  container-type: inline-size;
}

/* 使用容器查询，当容器的方向为横向时，应用样式 */
@container (orientation: landscape) {
  .element {
    /* 样式 */
  }
}

指定容器名称

/* 定义容器并指定名称 */
.container {
  container-type: size;
  container-name: myContainer;
}

/* 使用容器名称进行查询 */
@container myContainer (min-width: 600px) {
  .element {
    /* 样式 */
  }
}