语法

具名条件

所有预设媒体与容器条件、展开后的查询以及各自测量的范围。

本页内容

预设定义了各自独立的媒体与容器条件。它们共享简短名称，但这两个注册表都不是主题令牌集合。单独的 @md 查询视口，@container(--md) 则查询符合条件的祖先容器。

媒体条件

媒体名称来自 media.css。宽度条件使用原本编写的 rem 值，方向与偏好条件则使用原生媒体特性。@dark 和 @light 检查的是系统偏好，不是手动选择的网站主题。

最小视口宽度

后缀	展开后的查询
`@4xs`	`(width >= 22.5rem)`
`@3xs`	`(width >= 30rem)`
`@2xs`	`(width >= 37.5rem)`
`@xs`	`(width >= 48rem)`
`@sm`	`(width >= 52.125rem)`
`@md`	`(width >= 64rem)`
`@lg`	`(width >= 80rem)`
`@xl`	`(width >= 90rem)`
`@2xl`	`(width >= 100rem)`
`@3xl`	`(width >= 120rem)`
`@4xl`	`(width >= 160rem)`

视口宽度低于阈值

后缀	展开后的查询
`@max-4xs`	`not (width >= 22.5rem)`
`@max-3xs`	`not (width >= 30rem)`
`@max-2xs`	`not (width >= 37.5rem)`
`@max-xs`	`not (width >= 48rem)`
`@max-sm`	`not (width >= 52.125rem)`
`@max-md`	`not (width >= 64rem)`
`@max-lg`	`not (width >= 80rem)`
`@max-xl`	`not (width >= 90rem)`
`@max-2xl`	`not (width >= 100rem)`
`@max-3xl`	`not (width >= 120rem)`
`@max-4xl`	`not (width >= 160rem)`

方向与偏好设置

后缀	展开后的查询
`@dark`	`(prefers-color-scheme: dark)`
`@landscape`	`(orientation: landscape)`
`@light`	`(prefers-color-scheme: light)`
`@motion-reduce`	`(prefers-reduced-motion: reduce)`
`@motion-safe`	`(prefers-reduced-motion: no-preference)`
`@portrait`	`(orientation: portrait)`

容器条件

容器名称来自 container.css。定义只提供查询条件：@container(--md) 使用最近且符合条件的容器，@container(card|--md) 则选择名为 card 且符合条件的容器。两种形式都不会创建容器。

最小容器宽度

后缀	展开后的查询
`@container(--3xs)`	`(width >= 16rem)`
`@container(--2xs)`	`(width >= 18rem)`
`@container(--xs)`	`(width >= 20rem)`
`@container(--sm)`	`(width >= 24rem)`
`@container(--md)`	`(width >= 28rem)`
`@container(--lg)`	`(width >= 32rem)`
`@container(--xl)`	`(width >= 36rem)`
`@container(--2xl)`	`(width >= 42rem)`
`@container(--3xl)`	`(width >= 48rem)`
`@container(--4xl)`	`(width >= 56rem)`
`@container(--5xl)`	`(width >= 64rem)`
`@container(--6xl)`	`(width >= 72rem)`
`@container(--7xl)`	`(width >= 80rem)`

容器宽度低于阈值

后缀	展开后的查询
`@container(--max-3xs)`	`not (width >= 16rem)`
`@container(--max-2xs)`	`not (width >= 18rem)`
`@container(--max-xs)`	`not (width >= 20rem)`
`@container(--max-sm)`	`not (width >= 24rem)`
`@container(--max-md)`	`not (width >= 28rem)`
`@container(--max-lg)`	`not (width >= 32rem)`
`@container(--max-xl)`	`not (width >= 36rem)`
`@container(--max-2xl)`	`not (width >= 42rem)`
`@container(--max-3xl)`	`not (width >= 48rem)`
`@container(--max-4xl)`	`not (width >= 56rem)`
`@container(--max-5xl)`	`not (width >= 64rem)`
`@container(--max-6xl)`	`not (width >= 72rem)`
`@container(--max-7xl)`	`not (width >= 80rem)`

每个预设 max- 条件都是对应最小值条件的互补条件。下方展开的查询在边界处不会重叠。原始定义通过 not (--name) 引用对应名称。

名称相同，作用域各自独立

同一个键可以在不同查询领域表示不同阈值。--container-md 这类容器尺寸令牌则属于第三种独立用途：为尺寸工具类提供长度。

用法

这个布局在预设 md 视口阈值以下使用单列，从阈值起改用三列。

Notes

Drafts

自定义

为视口或偏好查询声明自定义媒体名称，或为组件查询声明自定义容器名称。原生单位会保留。在已编译的 manifest 中替换条件时，如果两个阈值都要改变，也必须重新声明其互补条件。

@custom-media --tablet (width >= 48rem);@custom-container --wide-card (width >= 30rem);

<aside class="(container-name:card) container-inline">  <div class="grid-cols(1) grid-cols(2)@container(card|--wide-card)">Card content</div></aside><div class="grid-cols(1) grid-cols(3)@tablet">Page content</div>

生成的 CSS

@layer utilities {  .grid-cols\(1\) {    display: grid;    grid-template-columns: repeat(1, minmax(0, 1fr))  }  .container-inline {    container-type: inline-size  }  .\(container-name\:card\) {    container-name: card  }  @container card (width >= 30rem) {    .grid-cols\(2\)\@container\(card\|--wide-card\) {      display: grid;      grid-template-columns: repeat(2, minmax(0, 1fr))    }  }  @media (width >= 48rem) {    .grid-cols\(3\)\@tablet {      display: grid;      grid-template-columns: repeat(3, minmax(0, 1fr))    }  }}

另见条件语法, 条件定义作用域, 查询定义, 容器尺寸令牌与响应式设计.