CSS 容器查询

使用容器查询

要使用容器查询，你需要在元素上声明一个局限上下文，以便浏览器知道你可能希望稍后查询此容器的尺寸。为此，请使用 container-type 属性，值为 size、inline-size 或 normal。

这些值具有以下效果：

size

查询将基于容器的行向和块向尺度，将布局、样式和大小的限制应用于容器。

inline-size

查询将基于容器的行向尺度，将布局、样式和行向大小的限制应用于元素。

normal

该元素不是任何容器大小查询的查询容器，但仍然是容器样式查询的查询容器。

考虑以下带有标题和一些文本的博客文章的卡片组件示例：

html

你可以使用 container-type 属性创建一个容器上下文：

css.post {

container-type: inline-size;

}

接下来，使用 at 规则 @container 定义容器查询。以下示例中的查询将根据具有局限上下文的最近祖先元素的大小应用样式于元素。具体而言，如果容器宽度大于 700px，则此查询将为卡片标题应用更大的字体大小：

css/* 默认的卡片标题样式 */

.card h2 {

font-size: 1em;

}

/* 如果容器宽度大于 700px */

@container (min-width: 700px) {

.card h2 {

font-size: 2em;

}

}

使用容器查询时，卡片可以在页面的多个区域中重复使用，无需每次都知道它放置在的具体位置。如果包含卡片的容器宽度小于 700px，卡片标题的字体将变小，如果卡片在宽度大于 700px 的容器中，则卡片标题的字体将变大。

有关容器查询语法的更多信息，请参阅 @container 页面。