背景

今天PM過(guò)來(lái)問(wèn)我: 蛋總，有些用戶(hù)反饋他們屏幕太小了 , 需要滑動(dòng), 操作不方便。我們的系統(tǒng)能不能改成自適應(yīng)布局啊?

我頓時(shí)虎軀一震：woc, 要把一個(gè)迭代了一年多的固定設(shè)計(jì)的產(chǎn)品，改成自適應(yīng)布局? 真讓人害怕 ??????。

于是，我就去查了一些自適應(yīng)布局的資料，嘗試找出一種改造成本最小的方案。

過(guò)程中發(fā)現(xiàn)了一個(gè)比較好玩的東西：CSS 容器查詢(xún)。

對(duì)此，我做了一下簡(jiǎn)單的整理和總結(jié)，在此分享給大家，希望對(duì)大家有所啟發(fā)。

正文

什么是 CSS 容器查詢(xún)

簡(jiǎn)單來(lái)說(shuō): 容器查詢(xún)?cè)试S開(kāi)發(fā)者根據(jù)容器元素的大小來(lái)設(shè)置元素的樣式。

它類(lèi)似于 @media查詢(xún)，不同之處在于它根據(jù)容器的大小而不是視口的大小進(jìn)行判斷。

我們使用創(chuàng)建響應(yīng)式設(shè)計(jì)時(shí)，通常使用媒體查詢(xún)根據(jù)視口的大小來(lái)更改文檔布局。

但是，許多設(shè)計(jì)都有一些通用組件，這些組件會(huì)根據(jù)其容器的可用寬度來(lái)更改布局。

這可能并不總是與視口的大小有關(guān)，而是與組件在布局中的放置位置有關(guān)。

例如，以下組件可能顯示在網(wǎng)站布局的窄或寬列中。

如果有空間，它將顯示為兩列，否則，我們希望將其堆疊顯示。

上圖中的左右兩個(gè)組件，是同一個(gè)組件，功能上是完全一樣的，只是要展示不同的布局。

目前而言，我們可以通過(guò)以某種方式識(shí)別該組件，比如通過(guò)添加一個(gè)類(lèi)或使用其他選擇器來(lái)定位元素，該選擇器可以查看它在文檔結(jié)構(gòu)中的位置。

但是，這并不能完全實(shí)現(xiàn)媒體查詢(xún)?cè)谡麄€(gè)布局中的作用。

媒體查詢(xún)使我們能夠根據(jù)視口的范圍來(lái)改變?cè)氐拇笮　?/p>

當(dāng)我們添加一個(gè)類(lèi)或目標(biāo)元素時(shí)，我們決定當(dāng)對(duì)象在側(cè)邊欄中時(shí)，它必須使用堆疊布局。

但是，就可用空間而言，很可能是在大屏幕上，側(cè)邊欄中的對(duì)象將具有足夠的空間來(lái)以并排布局顯示。

容器查詢(xún)將解決這種情況。

除了查看視口的大小，我們還可以查看容器的大小，并根據(jù)容器中的空間進(jìn)行布局調(diào)整。

CSS 容器查提案

容器查詢(xún)，將成為css containment規(guī)范的一部分，并向contain屬性添加新值。

該contain屬性最初是為了性能優(yōu)化而設(shè)計(jì)的。

它為Web開(kāi)發(fā)人員提供了一種方法來(lái)隔離DOM的各個(gè)部分，并向?yàn)g覽器聲明這些部分與文檔的其余部分無(wú)關(guān)。

使用contain: size;表示瀏覽器在兩個(gè)維度上都知道該區(qū)域的大小。

知道它有多大的容器，正是我們進(jìn)行容器查詢(xún)所需要的。

但是，通常我們并不經(jīng)常知道這兩個(gè)維度有多大。

當(dāng)我們使用媒體查詢(xún)時(shí)，大多數(shù)時(shí)候我們都會(huì)指定可用的寬度（或內(nèi)聯(lián)大?。?。

我們將列定義為: 該維度中,空間的百分比或分?jǐn)?shù)。

因此，容器查詢(xún)僅允許通過(guò)在一維中指示大小來(lái)擴(kuò)展包含屬性，這被描述為單軸遏制。

以下CSS將創(chuàng)建一個(gè)僅在嵌入式軸上包含容器的容器，內(nèi)容可以增長(zhǎng)到在塊軸上所需的大?。?/p>

.sidebar {
  contain: layout inline-size;
}

聲明contain屬性，并且把layout和size的值疊加, 瀏覽器便會(huì)在該元素上創(chuàng)建一個(gè)containment上下文。

聲明了這個(gè)屬性，就意味著瀏覽器知道：我以后可能要查詢(xún)此容器。

然后，可以編寫(xiě)一個(gè)查詢(xún)來(lái)查找此包含上下文而不是視口大小，以便為組件制定布局決策。

使用創(chuàng)建容器查@container。

這將查詢(xún)最近的包含上下文。

為了使卡僅在邊欄寬于700px時(shí)才顯示為兩列，我們使用以下CSS：

@container (min-width: 700px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

如果布局的其他區(qū)域也是containment，那么我們可以將組件放到那些區(qū)域中，它將自動(dòng)響應(yīng)相關(guān)的容器。這使得我們可以在模式庫(kù)中創(chuàng)建的各種組件真正可重用，而無(wú)需知道它們所處的上下文。

其實(shí)還有很多事情可以說(shuō)，上文介紹的只是一些基本概念。

另外，上文顯示的基本功能都已經(jīng)可以在Chrome Canary中進(jìn)行測(cè)試。

下載Canary，然后轉(zhuǎn)到chrome://flags，搜索Container Queries并啟用該標(biāo)志。

在線演示demo集合

本文演示的 demo 的在線鏈接：https://codepen.io/rachelandrew/pen/NWdaxde

以及容器查詢(xún) demo 的大集合: https://codepen.io/collection/XQrgJo

容器查詢(xún)的兼容性

目前還沒(méi)有瀏覽器支持。

容器查詢(xún)的相關(guān)進(jìn)展

Blink components

https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink

Proposed (提案階段）

Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1145970

共識(shí)和標(biāo)準(zhǔn)

Chrome瀏覽器中提供功能后，此處列出的值不保證是最新的。

Firefox: No signal
Edge: No signal
Safari: No signal
Web Developers: No signals

結(jié)論

CSS 容器查詢(xún)，為自適應(yīng)布局方案提供了一種新的思路。

但是目前還處于提案階段，感興趣的可以保持關(guān)注。

好了，本文的內(nèi)容就這么多，謝謝。

你可能不知道的「 CSS 容器查詢(xún) 」

背景

正文