學姐叫我看 CSS 新出的容器查詢，然後把公共元件重構成響應式的！

作者：AAhmad Shadeed

譯者：前端小智

來源：shadeed

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

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

CSS容器查詢，一個長期以來被web開發者要求的特性，很快就會出現在CSS中，在最新的 Chrome Canary 中，我們可以通過

chrome://flags/#enable-container-queries

開啟 Container Queries 功能。在本文中，我将介紹它是什麼，它将如何改變作為設計師的工作流，等等。

目前響應設計狀态

目前，我們實作響應式，一般需要 UI 設計三個樣式，分别是移動，平闆電腦和桌面等。

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

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

上圖是同一個元件，它有三個變體，即

default

、

Card

和

Featured

。在CSS中，開發人員需要建立此元件的三個變體，其中每個組成均是唯一的。

.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%;
  }
}

複制

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

問題是，隻有當視口寬度大于特定值時，開發人員才會使用元件的變體。例如，如果我在平闆中使用

featured

也就是 PC 的樣式，它不能工作，為什麼?因為它的媒體查詢寬度是大于

1300px

。

不僅如此，當内容低于預期時，我們還會面臨一個問題。有時，UP主可能隻會添加一篇文章，而設計是包含其中的三篇。在這種情況下，要麼我們将有一個空的空間，要麼項目将擴充以填滿可用的空間。考慮下圖：

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

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

這樣的話，如果我們把思路轉向元件的父元件呢?換句話說，如果我們查詢父元件，并根據父元件的寬度或高度來決定元件應該是什麼樣子的呢?我們來看下容器查詢的概念。

什麼是容器查詢

首先，讓我定義容器。它就包含另一個元素的元素，一般我們叫它

wrapper

。

最新的 Chrome Canary 中，我們可以通過 chrome://flags/#enable-container-queries 開啟 Container Queries 功能。

當一個元件被放置在一個項中，它就被包含在該項中。這意味着，我們可以查詢父元素的寬度并據此修改它。考慮下圖

注意，每個卡片都有一個黃色的輪廓線，代表每個元件的父元件。使用CSS容器查詢，我們可以根據父元件的寬度修改元件。

<div class="o-grid">
  <div class="o-grid__item">
    <article class="c-media"></article>
  </div>
  <!-- + more items -->
</div>

複制

該元件是具有類

.c-media

的項，它的父級是

.o-grid__item

元素。在CSS中，我們可以執行以下操作：

.o-grid__item {
  contain: layout inline-size style;
}

.c-media {
  /* Default style */
}

@container (min-width: 320px) {
  .c-media {
    /* The styles */
  }
}

@container (min-width: 450px) {
  .c-media {
    /* The styles */
  }
}

複制

首先，我們告訴浏覽器，每個帶有class

.o-grid

項的元素都是一個容器。然後，再告訴浏覽器，如果父元素的寬度等于或大于500px，它應該以不同的方式顯示。對于700px查詢也是如此。這就是CSS容器查詢的工作原理。

此外，我們可以在任何想要的地方定義它們，這意味着如果需要，我們可以在頂級容器上進行查詢。現在大家已經了解了CSS容器查詢的基本思想，在看看下面圖檔加深一下映像。

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

在設計時考慮容器查詢

作為一名 UI，你需要适應這個革命性的CSS特性，因為它将改變我們為網頁設計的方式。我們不僅為螢幕尺寸設計，還考慮元件在容器寬度變化時應如何适應。

現在，設計系統變得越來越流行。設計團隊将建構一組規則群組件，以便其他成員可以基于它們建構頁面。随着CSS容器查詢的到來，我們還将設計一個元件應該如何根據其父元件的寬度進行調整。

考慮以下設計:

請注意，我們有标題、文章部分、引文和時事通訊。它們中的每一個都應該适應父視圖的寬度。

我可以把這些元件分成以下幾個部分

Viewport (媒體查詢)
Parent （容器查詢）
通用:不受影響的元件，如按鈕、标簽、段落。

對于示例UI，下面是我們如何劃分元件。

當我們在設計UI時以這種心态思考時，我們可以開始考慮元件的不同變體，這些元件依賴于它們的父寬度。

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

作為一名設計師，一開始考慮父級寬度可能有點奇怪，但這是未來的發展方向。我們為前端開發人員提供每個元件的細節和版本，他們可以使用它們。

不僅如此，我們還可能有一個元件的變體，它應該隻顯示在特定的上下文中。例如，事件清單頁面。在這種情況下，清楚在何處使用此變體是很重要的。

問題是，如何告訴設計師應該在哪裡使用這些元件。

與開發人員溝通

良好的溝通是項目成功的重要因素。作為一名設計人員，我們應該提供關于應該在何處使用元件變體的指導。它可以是一個完整的頁面設計，也可以是一個顯示如何使用每個元件的簡單圖。

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

在CSS網格中，我們可以通過使用auto-fit關鍵字告訴浏覽器，如果列的數量低于預期，我們希望展開列(您可以在這裡閱讀更多相關内容)。這一功能非常強大，因為它可以幫助我們在相同的背景下呈現不同的變體。

讓一個元件對它的父寬度做出反應是非常有用的。正如剛才所看到的，我們重新檢視了桌面大小的頁面，并且有不同的部分，每個部分的列數不同。

在設計響應式元件時避免複雜性

重要的是要記住，元件的内部部分就像樂高遊戲。我們可以根據目前的變化對它們進行排序，但所有的東西都有一個限制。有時，前端開發人員最好處理一個全新的元件，而不是使用容器查詢建立變體。

考慮以下。

它具有以下内容：

頭像
名稱
按鈕
鍵/值對

如果内部部分保持不變，或者至少不包含新的部分，我們可以改變元件，并有如下所示的多種變化。

CSS容器查詢用例

我們來探索一些可以使用CSS容器查詢實作的用例。

聊天清單

我在Facebook messenger上看到了這種模式。聊天清單根據視口寬度改變。我們可以使用CSS容器查詢來實作它。

當有足夠的空間時，清單将展開并顯示每個使用者的名稱。聊天清單的父元素可以是動态調整大小的元素(例如:使用CSS視口單元，或CSS比較函數)。

// HTML
<div class="content">
  <aside>
    <ul>
      <li>
        <img src="shadeed.jpg" alt="Ahmad Shadeed" />
        <span class="name">Ahmad Shadeed</span>
      </li>
    </ul>
  </aside>
  <main>
    <h2>Main content</h2>
  </main>
</div>

複制

// CSS
.content {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
}

aside {
  contain: layout inline-size style;
}

@container (min-width: 180px) {
  .name {
    display: block;
  }
}

複制

aside

寬度是

0.4f

，是以它是動态寬度。另外，我添加了

contain

屬性。然後，如果容器寬度大于180px，将顯示使用者名。

另一個類似的用例是側導航。我們可以切換導航項标簽的位置，從在新行或旁邊的圖示。

當容器很小時，導航項标簽是如何從一個新行切換的，當有足夠的空間時，導航項标簽是如何靠近導航圖示的。

示例位址：https://codepen.io/shadeed/pe...

~完，我是小智，我要去刷碗了，我們下期見!

代碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://ishadee.com/article/c...

交流

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。