帶有容器查詢的'智能”佈局

現代CSS繼續為長期設計挑戰提供創新的簡化解決方案。 但是，這些進步通常會引入新的可能性，而不僅僅是解決問題。容器查詢示例性，為佈局設計提供了令人興奮的新途徑。 但是，它們與媒體查詢的相似性可能導致其獨特功能的實現不足。

>媒體查詢在響應式Web設計中發揮了作用，但它們具有固有的局限性。 他們缺乏上下文意識，主要依賴於視口尺寸和瀏覽器的初始字體大小（不是CSS中定義的根字體大小）。

考慮此示例：

>直覺上，人們可能會假設背景顏色在1120px（35REM

html {
  font-size: 32px;
}

body {
  background: lightsalmon;
}

@media (min-width: 35rem) {
  body {
    background: lightseagreen;
  }
}

32px）的視口寬度上發生變化。 這是不正確的。媒體查詢僅考慮瀏覽器的初始*字體大小（通常為16px，但可調整用戶調整），如媒體查詢規範中指定：相對長度單元基於初始值，獨立於聲明的值。

。 此設計選擇可防止以下方案中的無限循環 相比之下，容器查詢提供了卓越的智能。 他們直接評估了容器的大小，消除了斷點中“魔術數字”的需求。

> 例如，要創建一個更大尺寸的三列網格，介質查詢需要精確的斷點計算。使用容器查詢，我們定義最小列寬度，並相應地進行佈局調整。 如果我們想要三個300px列，我們知道一個900px容器就足夠了。 由於視口內的容器大小的可變性，這與媒體查詢無濟於事。 此外，容器查詢支持任何單元，包括

（字符寬度），允許基於文本內容進行佈局。

html {
  font-size: 16px;
}

@media (min-width: 30rem) {
  html {
    font-size: 32px;
  }
}

>示例：

通過在容器查詢中使用ch（如Miriam Suzanne的建議）進一步增強了這種方法：

。

實用的注意事項和解決方案：

.grid-parent { container-type: inline-size; }

.grid {
  display: grid;
  gap: 1rem;

  @container (width > 90ch) {
    grid-template-columns: repeat(3, 1fr);
  }
}

>

>容器查詢需要定義的容器元素。 這需要包裝元素，這可能很麻煩，尤其是在網格或彈性物品的情況下。 但是，使用calc()允許主網格充當容器：> @container (width > calc(30ch * 3))

這可以根據列數啟用樣式：

>斷點的自定義屬性可以增強開發人員的體驗，但當前功能具有顯著優勢。

repeat(auto-fit, ...) flexbox考慮：

>容器查詢可以應用於Flexbox，但是Flexbox算法未考慮Flex項目上的填充和邊界，這可能導致意外的佈局變化。 因此，對於這種響應式佈局，通常首選網格。

> 總而言之，集裝箱查詢為響應式設計提供了一種更聰明，更靈活的方法，超越了媒體查詢的局限性並解鎖了新的創意可能性。

以上是帶有容器查詢的'智能”佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！