在行為上思考，而不是屏幕大小

Chase McCoy撰寫了一篇關於創建項目網格時“間隙問題”的精彩文章。他的論點可以概括如下：我們應該如何使用CSS中的邊距來設置元素間距？他指出，當與flexbox一起使用時，gap屬性還不夠完善，例如：

 .grid {
  display: flex;
  gap: 10px;
}

目前，使用gap與flexbox結合僅在Firefox中受支持，我已經在幾個項目中忘記了這一點。所以要注意這一點。

無論如何，Chase博客文章中我最喜歡的一部分是他提到的Andy Bell創建響應式佈局的技術，無需媒體查詢，如下所示：

 .grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

這段CSS代碼的作用如下：

• 創建一個網格，列和行之間有10px的間隙。
• 每列的最小寬度為150px。
• 每列的寬度也相等（1fr）。
• 網格應自動填充盡可能多的列。

所有這一切最巧妙之處在於，我們的網格現在由於minmax而有效地實現了響應式——如果調整瀏覽器大小，網格將自動調整為較少的列數，就像這樣：

完全不需要媒體查詢！當然，還有其他幾種方法可以實現這一點，但我認為這種方法很巧妙，不僅僅是因為我們避免了媒體查詢——而是因為它教會我們以一種新的方式來思考設計和構建組件。

Chase繼續說道：

使用此技術，無需使用斷點來指定項目應堆疊的屏幕尺寸，而是指定元素在堆疊之前應具有的最小尺寸。我喜歡這一點，因為它鼓勵開發人員從行為而不是屏幕尺寸的角度來思考響應式設計。

“行為而非屏幕尺寸”是思考組件設計的一種極好的方式！我在為設計系統創建組件時遇到的許多問題，都是因為我一直在考慮屏幕尺寸——移動設備、平板電腦、台式機等——並試圖使這些組件適應這些限制。

從行為的角度思考總是更有效，因為除了我們正在使用的屏幕或設備寬度之外，還有很多其他因素會影響組件。也許我們希望該組件適合另一個組件。或者我們想將一些輔助文本與它對齊以進行比較。

無論哪種方式，在擁有容器查詢之前，從行為而不是屏幕尺寸的角度思考實際上是不完全可能的，正如Chris所寫：

容器查詢始終是CSS中所需改進的首要清單。普遍觀點是，如果我們有容器查詢，我們將不會編寫許多基於頁面大小的全局媒體查詢。這是因為我們實際上試圖控制一個更局部的容器，而我們現在為此使用媒體查詢的唯一原因是它是我們在CSS中擁有的最佳工具。我完全相信這一點。

以上是在行為上思考，而不是屏幕大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！