語法
具名條件
所有預設媒體與容器條件、展開後的查詢，以及各自量測的範圍。
本頁目錄
預設集定義了各自獨立的媒體與容器條件。它們共用簡短名稱，但這兩個登錄表都不是主題 token 集合。單獨的 @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 這類容器尺寸 token 則屬於第三種獨立用途：為尺寸 utilities 提供長度。
相同名稱，量測不同邊界
預設的 @md 門檻為 64rem，@container(--md) 則為 28rem。雖然兩者都使用 md 名稱，這兩份獨立定義查詢的卻是不同邊界。
文字說明
- 外側邊界代表寬度達到預設 @md 最小值 64rem 的檢視區。
- 內側邊界代表寬度達到獨立 @container(--md) 最小值 28rem 的查詢容器。被查詢的元素位於該容器內。
- 兩種寬度採用相同繪圖比例，初始字型大小與根元素字型大小都是 16px。修改容器尺寸 token 不會改變任一條件定義。
用法
這個版面在預設 md 檢視區門檻以下使用單欄，從門檻起改用三欄。
Notes
Drafts
Archive
<div class="… grid-cols(1) grid-cols(3)@md"> <div>Notes</div> <div>Drafts</div> <div>Archive</div></div>產生的 CSS
@layer utilities { .grid-cols\(1\) { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)) } @media (width >= 64rem) { .grid-cols\(3\)\@md { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) } }}自訂
為檢視區或偏好查詢宣告自訂媒體名稱，或為元件查詢宣告自訂容器名稱。原生單位會保留。在已編譯的 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)) } }}另見 條件語法, 條件定義範圍, 查詢定義, 容器尺寸 token 與 響應式設計.