CSS 容器查询（Container Queries）详解

CSS 容器查询（Container Queries）是一种新的布局技术，允许开发者根据容器的大小动态调整样式，而不是根据整个视口或设备的大小。通过使用 @container 规则，可以为容器内部的元素定义响应式样式。本文将详细介绍 @container 及其相关属性。

---

1. 容器查询的基本概念

容器查询的核心思想是让样式根据容器的大小动态调整，而不是根据视口的大小。这使得组件可以在不同的上下文中自适应，提高了组件的可重用性和灵活性。

1.1 容器查询的组成部分

• 容器：通过 container-type 属性将元素标记为容器。
• 查询规则：使用 @container 规则定义根据容器大小应用的样式。

---

2. 相关属性

2.1 container-type

• 作用：定义元素的容器类型，使其成为一个容器查询的容器。
• 常用值：
  • size：容器的大小（宽度和高度）可以作为查询条件。
  • inline-size：容器的内联大小（通常是宽度）可以作为查询条件。
  • normal：默认值，元素不作为容器。

2.2 container-name

• 作用：为容器指定一个名称，以便在 @container 规则中引用。
• 示例：

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

2.3 container

• 作用：container 是 container-type 和 container-name 的简写形式。
• 语法：container: <name> / <type>
• 示例：

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

---

3. @container 规则

@container 规则用于定义根据容器大小应用的样式。语法如下：

@container <container-name> (<container-feature>) {
  /* 样式规则 */
}

• <container-name>：容器的名称（可选）。
• <container-feature>：容器的特性，如 width、height 等。

3.1 常见容器特性

• width、min-width、max-width：容器的宽度。
• height、min-height、max-height：容器的高度。
• aspect-ratio：容器的宽高比。

3.2 示例

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

@container (min-width: 300px) {
  .child {
    font-size: 20px;
  }
}

---

4. 综合示例

以下是一个完整的示例，展示如何使用 container-type、container-name 和 @container 规则实现响应式组件：

<div class="parent">
  <div class="child">
    This text will resize based on the container's width.
  </div>
</div>

.parent {
  container-type: inline-size;
  container-name: sidebar;
  width: 50%; /* 父容器宽度为页面宽度的 50% */
  border: 1px solid #000;
  padding: 20px;
}

@container sidebar (min-width: 300px) {
  .child {
    font-size: 20px;
  }
}

@container sidebar (max-width: 299px) {
  .child {
    font-size: 16px;
  }
}

解释：

• 父容器：设置了 container-type: inline-size 和 container-name: sidebar，使其成为一个容器查询的容器。
• 子元素：根据容器的大小动态调整字体大小。

---

5. 总结

属性	作用	示例值
container-type	定义容器类型，用于容器查询	inline-size、size
container-name	为容器指定名称，用于 @container 规则	sidebar
container	container-type 和 container-name 的简写形式	sidebar / inline-size
@container	定义根据容器大小应用的样式	@container sidebar (min-width: 300px)

---

6. 注意事项

1. 浏览器兼容性：

   • 容器查询是较新的 CSS 特性，可能在某些旧版浏览器中不受支持。
   • 使用前请检查浏览器兼容性。

2. 性能考虑：

   • 使用容器查询可能会增加浏览器的计算负担，尤其是在复杂的布局中。

3. 设计灵活性：

   • 容器查询提供了更高的设计灵活性，使组件可以在不同的上下文中自适应。