溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS容器查詢的示例分析

發布時間:2021-06-11 13:40:42 來源:億速云 閱讀:196 作者:小新 欄目:web開發

這篇文章給大家分享的是有關CSS容器查詢的示例分析的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

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

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

當前響應設計狀態

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

CSS容器查詢的示例分析

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

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

CSS容器查詢的示例分析

上圖是同一個組件,它有三個變體,即default、CardFeatured。在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。

CSS容器查詢的示例分析

不僅如此,當內容低于預期時,我們還會面臨一個問題。有時,UP主可能只會添加一篇文章,而設計是包含其中的三篇。在這種情況下,要么我們將有一個空的空間,要么項目將擴展以填滿可用的空間??紤]下圖:

CSS容器查詢的示例分析

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

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

CSS容器查詢的示例分析

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

什么是容器查詢

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

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

當一個組件被放置在一個項中,它就被包含在該項中。這意味著,我們可以查詢父元素的寬度并據此修改它??紤]下圖

CSS容器查詢的示例分析

注意,每個卡片都有一個黃色的輪廓線,代表每個組件的父組件。使用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容器查詢的工作原理。

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

CSS容器查詢的示例分析

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

在設計時考慮容器查詢

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

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

考慮以下設計:

CSS容器查詢的示例分析

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

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

  • Viewport (媒體查詢)

  • Parent (容器查詢)

  • 通用:不受影響的組件,如按鈕、標簽、段落。

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

CSS容器查詢的示例分析

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

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

CSS容器查詢的示例分析

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

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

問題是,如何告訴設計師應該在哪里使用這些組件。

與開發人員溝通

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

CSS容器查詢的示例分析

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

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

CSS容器查詢的示例分析

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

在設計響應式組件時避免復雜性

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

考慮以下。

CSS容器查詢的示例分析

它具有以下內容:

  • 頭像

  • 名稱

  • 按鈕

  • 鍵/值對

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

CSS容器查詢的示例分析

CSS容器查詢用例

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

聊天列表

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

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>
    <h3>Main content</h3>
  </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,將顯示用戶名。

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

CSS容器查詢的示例分析

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

感謝各位的閱讀!關于“CSS容器查詢的示例分析”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女