借助媒体查询，您可以根据视口的大小或所用设备的类型来调整布局。借助容器查询，您可以根据元素的祖先（即容器）的尺寸和状态，对元素进行更具体的调整。
假设您有一个简报订阅表单，打算在您网站上的多个情境中使用。您可能希望它在注册页面上占据整个页面宽度，但在包含其他内容的页面上进入分列模式。
如本演示所示，借助容器查询，您可以根据元素最近容器的属性（与视口大小无关）调整元素的属性，例如字体大小、内边距和布局。
设置容器查询
与媒体查询不同，容器查询分为两部分：
- 定义容器。
- 为子元素编写样式，以便在父容器符合查询条件时应用。
定义容器
您可以使用 container-type 属性定义容器。
.my-container-element { container-type: inline-size; } 值为 inline-size 的 container-type 可让您查询容器的内联轴。
如需同时针对 inline 轴和 block 轴进行查询，请使用 container-type: size。
main, .my-component { container-type: size; } container-type 的这两个值分别应用了不同类型的尺寸限制。元素的 Inline-size 包含可防止其后代影响其内联大小。
具有 size 包含关系的元素可防止其后代影响其在块轴和内嵌轴上的大小。
在此示例中，您可以看到尺寸包含会影响应用它的元素。
由于它不会根据子级（即 <p> 元素）的大小来调整大小，因此除非通过设置其尺寸（即 inline-size、block-size、aspect-ratio）或将其放置在明确指定尺寸的布局中来明确指定容器的大小，否则容器会折叠。
容器查询条件
建立容器后，您可以添加一个用英文圆括号括起来的条件，只有当该条件为 true 时，容器查询中的样式才会应用。对于基于祖先元素维度的大小容器查询，条件由以下部分组成：
- 一种尺寸特征：
width、height、inline-size、block-size、aspect-ratio或orientation， - 比较运算符（即
>、<、=、>=）， - 以及一个长度值。
.my-container-element { container-type: inline-size; } @container (inline-size > 30em) { .my-child-element { /* styles to apply when .my-container-element is wider than 30em */ } } 您还可以使用英文冒号和单个值来编写尺寸功能条件以进行测试。
@container (orientation: landscape) { /*...*/ } @container (min-width: 300px) { /*...*/ } 您还可以使用 and 和 or 等关键字组合多个条件，或使用运算符将多个条件串联在一起。
@container (inline-size > 40em) and (orientation: landscape) { /*...*/ } @container (height > 25vh) or (orientation: portrait) { /*...*/ } @container ( 10em <= width <= 500px) { /*...*/ } 命名容器
如需定位特定容器（即使它们不是最近的祖先），您可以使用 container-name 属性为容器命名。然后，您可以在定义条件之前引用要查询的容器名称。
.sidebar { container-name: main-sidebar; container-type: inline-size; } @container main-sidebar (inline-size > 20em) { .button-group { display: flex; padding-inline: 1.25em; } } 指定名称的容器必须仍然是正在设置样式的元素的祖先。
使用 container 属性的简写形式
借助 container 属性，您可以使用简写语法来定义容器并指定容器类型。
.sidebar { container: main-sidebar / inline-size; } 容器的名称位于斜线之前，容器的类型位于斜线之后。
容器查询单位
在容器中，您还可以使用容器相对长度单位。这为可存在于不同容器中的组件提供了更大的灵活性，因为相对长度会根据容器的尺寸进行调整。
在此示例中，容器长度单位 cqi（查询容器内嵌大小的 1%）用于按钮的内边距。
.container { container: button-container / inline-size; } .one { inline-size: 30vw; } .two { inline-size: 50vw; } button { padding: 2cqi 5cqi; } 两个按钮都应用了相同的相对单位，但由于这些单位是相对于容器大小而言的，因此第二个按钮的容器更大，所以其内边距也更大。
嵌套容器查询
您可以将容器查询嵌套在选择器中。
.my-element { display: grid; padding: 1em 2em; @container my-container (min-inline-size: 22em) { /* styles to apply when element's container is wider than 22em */ } } /* equivalent to */ .my-element { display: grid; padding: 1em 2em; } @container my-container (min-inline-size: 22em) { .my-element { /* styles to apply when element's is wider than 22em */ } } 或者将它们嵌套在其他容器查询或 at 规则中。
@container my-container (min-inline-size: 22em) { .my-element { /* styles to apply when element's is wider than 22em */ } } @layer base { @container my-container (min-inline-size: 22em) { .my-element { /* styles to apply */ } } } 检验您的掌握情况
哪些尺寸功能可用于容器查询条件？（请勾选所有适用选项）
widthblock-sizeinline-sizeviewport-sizeviewport-size 不是容器查询的有效尺寸功能。height如果容器类型为 inline-size，您可以查询容器的 aspect-ratio。
inline-size 时，无法查询元素的 aspect-ratio，因为 aspect-ratio 会将 block-size 或 height 纳入考虑范围。container-type 设置为 size 才能查询容器的宽高比，因为这会同时考虑容器的内联维度和块维度。如果您想使用基于容器高度的容器相对单位，可以选择以下哪项？
cqicqi 基于容器的逻辑内嵌大小cqqcqw 基于容器的宽度cqbcqb 基于容器的逻辑块大小cqvhcqvh 不是有效的 CSS 大小调整单位cqhcqh 基于容器的高度