在前端開發(fā)中經(jīng)常需要按不同屏幕尺寸來(lái)進(jìn)設(shè)計(jì)達(dá)到PC和移動(dòng)端響應(yīng)式。我們一般使用CSS媒體查詢來(lái)檢測(cè)視口寬度或高度，然后根據(jù)該模式改變?cè)O(shè)計(jì)。 這就是在過(guò)去10年中設(shè)計(jì)Web布局的方式。

CSS容器查詢，一個(gè)長(zhǎng)期以來(lái)被web開發(fā)者要求的特性，很快就會(huì)出現(xiàn)在CSS中，在最新的 Chrome Canary 中，我們可以通過(guò) chrome://flags/#enable-container-queries 開啟 Container Queries 功能。在本文中，我將介紹它是什么，它將如何改變作為設(shè)計(jì)師的工作流，等等。

當(dāng)前響應(yīng)設(shè)計(jì)狀態(tài)

當(dāng)前，我們實(shí)現(xiàn)響應(yīng)式，一般需要 UI 設(shè)計(jì)三個(gè)樣式，分別是移動(dòng)，平板電腦和桌面等。

不僅如此，當(dāng)內(nèi)容低于預(yù)期時(shí)，我們還會(huì)面臨一個(gè)問(wèn)題。有時(shí)，UP主可能只會(huì)添加一篇文章，而設(shè)計(jì)是包含其中的三篇。在這種情況下，要么我們將有一個(gè)空的空間，要么項(xiàng)目將擴(kuò)展以填滿可用的空間。考慮下圖：

在第一種情況下(Case 1)，文章太寬，會(huì)導(dǎo)致封面變形。第二種情況下(Case 2)也是一樣的問(wèn)題

如果使用容器查詢，我們可以通過(guò)查詢父組件來(lái)決定如何顯示特定組件來(lái)解決這些問(wèn)題。考慮下圖，它展示了我們?nèi)绾问褂萌萜鞑樵儊?lái)修復(fù)這個(gè)問(wèn)題。

請(qǐng)注意，我們有標(biāo)題、文章部分、引文和時(shí)事通訊。它們中的每一個(gè)都應(yīng)該適應(yīng)父視圖的寬度。

我可以把這些組件分成以下幾個(gè)部分

• Viewport (媒體查詢)
• Parent （容器查詢）
• 通用:不受影響的組件，如按鈕、標(biāo)簽、段落。

對(duì)于示例UI，下面是我們?nèi)绾蝿澐纸M件。

當(dāng)我們?cè)谠O(shè)計(jì)UI時(shí)以這種心態(tài)思考時(shí)，我們可以開始考慮組件的不同變體，這些組件依賴于它們的父寬度。

在下面的圖中，請(qǐng)注意文章組件的每個(gè)變化是如何以特定的寬度開始的。

作為一名設(shè)計(jì)師，一開始考慮父級(jí)寬度可能有點(diǎn)奇怪，但這是未來(lái)的發(fā)展方向。我們?yōu)榍岸碎_發(fā)人員提供每個(gè)組件的細(xì)節(jié)和版本，他們可以使用它們。

不僅如此，我們還可能有一個(gè)組件的變體，它應(yīng)該只顯示在特定的上下文中。例如，事件列表頁(yè)面。在這種情況下，清楚在何處使用此變體是很重要的。

問(wèn)題是，如何告訴設(shè)計(jì)師應(yīng)該在哪里使用這些組件。

與開發(fā)人員溝通

良好的溝通是項(xiàng)目成功的重要因素。作為一名設(shè)計(jì)人員，我們應(yīng)該提供關(guān)于應(yīng)該在何處使用組件變體的指導(dǎo)。它可以是一個(gè)完整的頁(yè)面設(shè)計(jì)，也可以是一個(gè)顯示如何使用每個(gè)組件的簡(jiǎn)單圖。

注意我是如何將每個(gè)變體映射到一個(gè)特定的上下文，而不是一個(gè)視口。為了進(jìn)一步證明這一點(diǎn)，我們配合 CSS網(wǎng)格一起使用時(shí)，組件的行為會(huì)有何不同。

在CSS網(wǎng)格中，我們可以通過(guò)使用auto-fit關(guān)鍵字告訴瀏覽器，如果列的數(shù)量低于預(yù)期，我們希望展開列(您可以在這里閱讀