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

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

當前響應設計狀態(tài)

當前，我們實現響應式，一般需要 UI 設計三個樣式，分別是移動，平板電腦和桌面等。

在上圖中，UI設計了三種版本，因此開發(fā)人員可以很好的實現它，這是很 nice的(這怕偷懶的 UI 只提供PC版本，這就很蛋疼)。

現在我們來看看使用媒體查詢來看看怎么實現它。

上圖是同一個組件，它有三個變體，即default、Card和Featured。在CSS中，開發(fā)人員需要創(chuàng)建此組件的三個變體，其中每個組成均是唯一的。

.c-media {   /* the default styles */   display: flex;   flex-wrap: wrap;   gap: 1rem; }  @media (min-with: 400px) {   .c-media--card {     display: block;   }    .c-media--card img {     margin-bottom: 1rem;   } }  @media (min-with: 1300px) {   .c-media--featured {     position: relative;     /* other styles */   }    .c-media--featured .c-media__content {     position: absolute;     left: 0;     top: 0;     width: 100%;     height: 100%;   } }

上面的變體取決于媒體查詢或視口寬度。 這意味著，我們無法根據其父寬度控制它們。 現在你可能會想，這里有什么問題？ 喔或，這是一個很好的問題。

問題是，只有當視口寬度大于特定值時，開發(fā)人員才會使用組件的變體。例如，如果我在平板中使用 featured 也就是 PC 的樣式，它不能工作，為什么?因為它的媒體查詢寬度是大于1300px。

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

如果使用容器查詢，我們可以通過查詢父組件來決定如何顯示特定組件來解決這些問題。考慮下圖，它展示了我們如何使用容器查詢來修復這個問題。

在左邊，這是一個正在調整大小的視口。在右邊，一個根據父組件寬度更改的組件。這就是容器查詢的功能和用途。

在設計時考慮容器查詢

作為一名 UI，你需要適應這個革命性的CSS特性，因為它將改變我們?yōu)榫W頁設計的方式。我們不僅為屏幕尺寸設計，還考慮組件在容器寬度變化時應如何適應。

現在，設計系統(tǒng)變得越來越流行。設計團隊將構建一組規(guī)則和組件，以便其他成員可以基于它們構建頁面。隨著CSS容器查詢的到來，我們還將設計一個組件應該如何根據其父組件的寬度進行調整。

考慮以下設計:

當我們在設計UI時以這種心態(tài)思考時，我們可以開始考慮組件的不同變體，這些組件依賴于它們的父寬度。

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

注意我是如何將每個變體映射到一個特定的上下文，而不是一個視口。為了進一步證明這一點，我們配合 CSS網格一起使用時，組件的行為會有何不同。

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