如何在沒有媒體查詢的情況下建立具有 3 列桌面和 1 列行動裝置的流體網格佈局？

在沒有媒體查詢的情況下實現3 列桌面和1 列移動佈局

問題：
我們如何建立流體網格佈局，從3 列桌面佈局切換到1 列行動佈局，而不依賴媒體查詢？

解決方案：
CSS 允許動態不依賴媒體查詢的版面調整。方法如下：

1.利用Clamp() 和Flex：
在最初的CSS 中，您在grid-template-columns 屬性中使用了Clip() 來根據螢幕尺寸從重複（3）切換到重複（1）。但是，單獨使用箝位（）並不能提供所需的結果。相反，我們可以在Flex 項目的flex-basis 屬性中使用箝位（）來創建包裝行為：

2.根據螢幕尺寸調整公式：
在此程式碼中，400px 表示佈局應從3 列切換到1 列的螢幕尺寸。您可以根據所需的斷點調整該值。例如，要以 500px 切換，請將 400px 替換為 500px。

3.計算說明：
公式max(0px, (400px - 100vw) * 1000) 確保當視口寬度大於400px 時，每個項目的flex-basis 保持為0px。這使它們在 3 列佈局中並排排列。然而，當視窗寬度減少到 400px 以下時，flex-basis 會變成一個很大的值，有效地將項目推到單獨的行上，從而形成 1 列佈局。

透過以這種方式使用clamp()，您可以實現流暢且響應式的佈局，適應不同的螢幕尺寸，而無需媒體查詢。

以上是如何在沒有媒體查詢的情況下建立具有 3 列桌面和 1 列行動裝置的流體網格佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！