css容器查询

October 16, 2023December 31, 2025

https://developer.mozilla.org/docs/Web/CSS/CSS_Container_Queries

Syntax

css

@container <container-condition> {
  <stylesheet>
}

注：Media Queries: Range Syntax

css

/* @container (min-width: 400px) and (max-width: 800px) */
/* @container (width >= 400) and (width <= 800px) */
@container (400px <= width <= 800px) {
    h2 {
        font-size: 1.5em;
    }
}

基本语法

注：一般都是水平书写，所以只需要知道 inline 为水平方向，block 为竖直方向
对于水平书写方向 writing-mode: horizontal-tb，inline 为水平方向，block 为竖直方向
对于竖直书写方向 writing-mode: vertical-rl，inline 为竖直方向，block 为水平方向

css

.post {
    container-name: sidebar;
    /* 将当前容器命名为 sidebar */
    container-type: inline-size;
    /* 默认值 normal，表示不参与容器查询 */
    /* inline-size，表示仅参与 inline轴 的容器查询 */
    /* size，表示参与 inline轴 和 block轴 的容器查询 */

    /* 
    简写
    container: sidebar / inline-size; 
    */
}

/* 不指定容器名称则查询所有容器 */
@container sidebar(width < 650px) {
    /* 选中在 sidebar 容器内符合指定查询的... */
    /* container-type: inline-size 指定容器仅参与水平方向查询，
       即只能查询 width，不能查询 height */
    .card {
        width: 50%;
        background-color: gray;
        font-size: 1em;
    }
}

支持嵌套使用

容器 CSS 局限

设置了 container-type 的容器会同时被施加 CSS 局限。

`container-type`	`normal`	`inline-size`	`size`
`contain`	`layout` `style` `size`	`layout` `style` `inline-size`	`none`

CSS 局限：contain 属性用于标识元素的子树是否独立于页面中的其他部分

contain 属性取值如下：

值	含义
`none`	-
`size`	开启size containment。意味着此元素的子元素尺寸无法影响元素本身的尺寸，计算其尺寸时视为无子元素（包括伪元素，如 `::before` `::after` `::marker`）。可使用 `contain-intrinsic-size` 指定应用此值的元素的尺寸。若不手动给予其尺寸，则多数时候元素尺寸将变为零。替换元素视为有自然宽度，无自然高度，无自然横纵比（可以有 `aspect-ratio`）。
`inline-size`	仅在 inline 方向应用 size containment
`layout`	开启layout containment。建立独立的格式化上下文。外部元素不能影响内部布局，反之亦然
`style`	开启style containment。确保由 `counter-increment` 和 `counter-set` 属性所创建的新计数器的作用域被限制为此子树。
`paint`	开启paint containment。与 `overflow: clip` 类似，不会创建格式化上下文，但会创建层叠上下文。
`strict`	相当于 size layout paint style。即开启所有局限。尽可能使用此值来获得优化。
`content`	相当于 layout paint style。相对于 strict 保险一些。因为没有应用尺寸局限，元素仍然可以响应其内容的尺寸。

容器样式查询

查询含有指定键值对属性的容器（例如：--accent-color 属性的值为 blue）
属性的值是以 computed_value 进行评估的（简而言之，考虑 inherits）

css

@container style(--accent-color: blue) {
    /* <stylesheet> */
}

/* 
如果不将自定义属性的数据类型声明为 <color>
则 blue 与 #0000ff 不相同
*/
@property --accent-color {
    syntax: "<color>";
    inherits: true;
}

容器查询单位

Unit	Description
cqw	表示容器查询宽度（Container Query Width）占比。1cqw 等于容器宽度的 1%
cqh	表示容器查询高度（Container Query Height）占比。1cqh 等于容器高度的 1%
cqi	表示容器查询 inline 轴方向的尺寸（Container Query Inline-Size）占比
cqb	表示容器查询 block 轴方向的尺寸（Container Query Block-Size）占比
cqmin	表示容器查询较小尺寸的（Container Query Min）占比
cqmax	表示容器查询较大尺寸的（Container Query Min）占比

←Back to home

This work is licensed under CC BY-NC-SA 4.0

YieldRay

css容器查询

Preview: