css容器查询

October 16, 2023

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;
    }
}

支持嵌套使用

容器样式查询

查询含有指定键值对属性的容器（例如：--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