容器查询可不仅仅是@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 {
    /* 樣式 */
  }
}