CSS 容器查询用法总结

CSS 容器查询用法总结

CSS 容器查询是一种强大的布局技术，允许您根据父容器的特性（而非视口）来应用样式。

MDN: developer.mozilla.org/en-US/docs/…

尺寸容器查询的使用方法

首先，需要在元素上声明一个容器上下文，让浏览器知道您想要查询此容器的尺寸：

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

container-type 属性的可选值：

• size：查询基于容器的内联和块级尺寸，应用布局、样式和尺寸包含
• inline-size：查询基于容器的内联尺寸，应用布局、样式和内联尺寸包含
• normal：元素不是尺寸查询的容器，但仍可用于样式查询

container-type: size;和inline-size主要区别？
size可以通过 @container (min-width: 300px) and (min-height: 200px)查询容器，
inline-size使用height就不行。

而且container-type: size会导致当前container元素的子元素脱离自己的文档流，inline-size就不会。

2. 编写容器查询规则

使用 @container 规则来定义查询，根据容器尺寸应用样式：

/* 默认卡片标题样式 */
.card h2 {
  font-size: 1em;
}

/* 当容器宽度大于700px时 */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

3. 命名容器上下文

可以使用 container-name 属性给容器上下文命名，以便定位特定容器：

.post {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 700px) {
  .card {
    font-size: 2em;
  }
}

4. 容器简写语法

使用 container 简写属性同时设置容器名称和类型：

.post {
  container: sidebar / inline-size;
}

容器查询长度单位

CSS 提供了专门的容器查询长度单位，使组件能够相对于其容器尺寸进行调整：

• cqw：容器查询宽度的 1%
• cqh：容器查询高度的 1%
• cqi：容器查询内联尺寸的 1%
• cqb：容器查询块级尺寸的 1%
• cqmin：cqi 和 cqb 中的较小值
• cqmax：cqi 和 cqb 中的较大值

示例：

@container (min-width: 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}