Chrome 正在試驗(yàn) css @container 查詢器功能，這是由 Oddbird 的 Miriam Suzanne 和一群網(wǎng)絡(luò)平臺開發(fā)者支持的 CSS 工作組 Containment Level 3 規(guī)范。@container 查詢器使我們能夠根據(jù)父容器的大小來設(shè)置元素的樣式。

你可以把這些想象成一個媒體查詢（@media），但不是依靠 viewport 來調(diào)整樣式，而是你的目標(biāo)元素的父容器會調(diào)整這些樣式。

容器查詢將是自 CSS3 以來 Web 樣式的最大變化，將會改變我們對“響應(yīng)式設(shè)計(jì)”含義的看法。

viewport 和用戶代理不再是我們創(chuàng)建響應(yīng)式布局和 UI 樣式的唯一目標(biāo)。通過容器查詢，元素將能夠定位自己的父元素并相應(yīng)地應(yīng)用自己的樣式。這意味著存在于側(cè)邊欄、主體或頭圖中的相同元素可能會根據(jù)其可用大小和動態(tài)看起來完全不同。

@container 實(shí)例

在本示例中，我在父級中使用了兩張帶有以下標(biāo)記的卡片：

<div class="card-container">
    <div class="card">
        <figure> ...</figure>
        <div>
            <div class="meta">
                <h2>...</h2>
                <span class="time">...</span>
            </div>
            <div class="notes">
                <p class="desc">...</p>
                <div class="links">...</div>
            </div>
            <button>...</button>
        </div>
    </div>
</div>
復(fù)制代碼

然后，我在將查詢?nèi)萜鳂邮降母讣墸?card-container）上設(shè)置 Containment（contain 屬性）。我還在 .card-container 的父級上設(shè)置了一個相對網(wǎng)格布局，因此它的 inline-size 將根據(jù)該網(wǎng)格而改變。這就是我使用 @container 查詢的內(nèi)容：

.card-container {
  contain: layout inline-size;
  width: 100%;
}
復(fù)制代碼

現(xiàn)在，我可以查詢?nèi)萜鳂邮絹碚{(diào)整樣式！這與使用基于寬度的媒體查詢設(shè)置樣式的方式非常相似，當(dāng)元素小于指定尺寸時使用 max-width 設(shè)置樣式，當(dāng)元素大于指定尺寸時使用 min-width。

/* 當(dāng)父容器寬度小于 850px，
不再顯示 .links
并且減小 .time 字體尺寸 */

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

/* 當(dāng)父容器寬度小于 650px 時，
減小 .card 元素之間的網(wǎng)格間距到 1rem */

@container (max-width: 650px) {
  .card {
    gap: 1rem;
  }

  /* ... */
}
復(fù)制代碼

容器查詢 + 媒體查詢

容器查詢的最佳功能之一是能夠?qū)?nbsp;微觀上的布局 與 宏觀上的布局 分開。我們可以使用容器查詢設(shè)置單個元素的樣式，創(chuàng)建細(xì)微的微觀布局，并使用媒體查詢（宏布局）設(shè)置整個頁面布局的樣式。這創(chuàng)造了一個新的控制水平，使界面更具響應(yīng)性。

這是另一個示例。它展示了使用媒體查詢進(jìn)行宏觀布局（即日歷從單面板到多面板）和微觀布局（即日期布局/大小和事件邊距/大小移動），以創(chuàng)建一個漂亮的和諧的查詢。

容器查詢 + CSS 網(wǎng)格

我個人最喜歡的查看容器查詢影響的方法之一是查看它們在網(wǎng)格中的工作方式。以下面的植物貿(mào)易 UI 為例：

本網(wǎng)站根本沒有使用媒體查詢。相反，我們只使用容器查詢和 CSS 網(wǎng)格來在不同的視圖中顯示購物卡組件。

在產(chǎn)品網(wǎng)格中，布局使用了 grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); 標(biāo)記創(chuàng)建。這將創(chuàng)建一個布局，告訴卡片占用可用的小數(shù)空間，直到它們的大小達(dá)到 230px，然后下一格切換到下一行。你可以在 1linelayouts.com 上查看更多網(wǎng)格技巧。

然后，我們有一個容器查詢，當(dāng)卡片寬度小于 350px 時，它會將卡片樣式設(shè)置為采用垂直塊布局，并通過應(yīng)用 display: flex（默認(rèn)情況下具有內(nèi)聯(lián)流）轉(zhuǎn)換為水平內(nèi)聯(lián)布局。

@container (min-width: 350px) {
  .product-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  /* ... */
}
復(fù)制代碼

這意味著每張卡片擁有自己的響應(yīng)式樣式。這是我們使用產(chǎn)品網(wǎng)格創(chuàng)建宏觀布局以及使用產(chǎn)品卡片創(chuàng)建微觀布局的另一個示例，酷斃了！

用法

為了使用@container，首先需要創(chuàng)建一個具有 Containment 的父元素。為此，我們需要在父級上設(shè)置 contain: layout inline-size。因?yàn)槲覀兡壳爸荒軐⑷萜鞑樵儜?yīng)用于內(nèi)聯(lián)軸，所以我們只可以使用 inline-size。這也可以防止我們的布局在塊方向上中斷。

設(shè)置 contain: layout inline-size 會創(chuàng)建一個新的 Containment 塊 和新的塊格式上下文，讓瀏覽器將其與布局的其余部分分開，現(xiàn)在我們就可以使用容器查詢了！

限制

目前，您不能使用基于高度的容器查詢，只能使用塊軸方向上的查詢。為了讓網(wǎng)格子元素與 @container 一起工作，我們需要添加一個容器元素。盡管如此，添加容器仍可讓我們獲得所需的效果。

試試看

您現(xiàn)在可以在 Chromium 中試驗(yàn) @container 屬性，方法是導(dǎo)航到：Chrome Canary 中的 chrome://flags 頁面并打開 #
experimental-container-queries 標(biāo)志。