CSS容器查询

以下是关于 容器查询（Container Queries） 的全面知识梳理，涵盖基础概念、核心语法、进阶用法及实际应用场景：

---

一、容器查询的基本概念

1. 定义与作用

• 容器查询 允许开发者根据 父容器（Container）的尺寸 动态调整子元素的样式，而非依赖视口尺寸（如媒体查询）。
• 核心价值：实现真正的组件级响应式设计，组件能自适应其所在容器的尺寸变化，而非全局视口。

2. 与媒体查询的对比

特性	容器查询	媒体查询
作用对象	父容器的尺寸变化	视口（屏幕）尺寸变化
适用场景	组件内部的样式适配	全局布局调整（如页面整体响应式）
耦合性	组件与容器解耦，复用性更强	依赖视口，组件复用受限

---

二、容器查询的核心语法

1. 定义容器

为父元素声明容器类型和名称，使其成为子元素的查询目标。

.parent-container {
   
  /* 定义容器类型 */
  container-type: inline-size;  /* 基于内联尺寸（宽度）响应 */
  container-name: main-container;  /* 可选：容器命名 */
  
  /* 简写语法 */
  container: main-container / inline-size;
}

容器类型（container-type）：

• inline-size：基于容器的内联轴尺寸（水平方向，对应 width）。
• size：基于容器的宽度和高度（双向响应）。
• normal：默认值，不作为查询容器。

2. 使用容器查询（@container）

在子元素的 CSS 中，通过 @container 规则监听父容器尺寸变化。

.child-element {
   
  font-size: 1rem;
}

/* 当父容器宽度 ≥ 600px 时 */
@container main-container (min-width: 600px)