無需媒體查詢即可實現 3 列桌面到 1 列行動佈局

Question

這裡研究了一些問題，但它們並不能完全解決我正在尋找的問題。假設我有一個網站並且我想要。在桌面上我想要這個：這很容易。 grid-template-columns:重複(3,33%)(基本上)但是，在行動裝置上，我想要這個我遇到的情況發生在它翻轉到單一列之前：我正在嘗試clamp()、minmax ()以及各種各樣的東西，但沒有任何東西能以我想要的方式運作。是的，我完全可以使用媒體查詢，但我希望使用現代

P粉070918777 · Answer

^{包含更通用規則的完整文章：https:// css-tricks.com/responsive-layouts-fewer-media-queries/}

這是一個在 flex-basis 中使用 max(0px, (400px - 100vw)*1000) 的想法。如果100vw（螢幕尺寸）大於400px，則此公式將給出0px，或在相反情況下給出一個非常大的值，為每個元素提供一個big flex-basis 並建立一個包裝。只要調整 400px 即可扮演 @media (max-width:400px)

#

.container {
  display:flex;
  flex-wrap:wrap;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
  flex-basis:max(0px, (400px - 100vw)*1000);
  flex-grow:1;
}

使用 CSS 網格，它可以如下所示：

.container {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(30%, (400px - 100vw)*1000, 100%),1fr));
  grid-gap:5px;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
}

一個類似的問題，我控制沒有媒體查詢的最大列數：CSS網格 - 沒有媒體查詢的最大列數

我們可以擴展上述解決方案以考慮更複雜的情況。

從 6 列移動到 3 列到 1 列的範例：

.container {
  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(15%,(800px - 100vw)*1000, 30%), (400px - 100vw)*1000, 100%)
      /* if(screen> 800px) 15% elseif(screen> 400px) 30% else 100% */
      ,1fr));
  grid-gap:5px;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
}

要了解這些值，請考慮以下範圍：

100%/7  100%/6  100%/5  100%/4  100%/3  100%/2  100%/1
 14.3%  16.7%    20%     25%     33.3%   50%     100%

要取得 6 列，我們需要 ]14.3% 16.7%] 範圍內的值（我考慮的是 15%）要獲得 3 列，我們需要 ]25% 33.3%] 範圍內的值（我考慮的是 30%）

我們只是避開邊緣以確保我們考慮到間隙。

使用 CSS 變數的更通用的解決方案，其中我將添加 0.1% 以確保該值足夠大以獲得所需的列數並且可以容納間隙。

我們也加入一些動態著色（相關：如何根據

元素的高度或寬度更改其顏色？)

.container {
  /* first breakpoint*/
  --w1:800px;
  --n1:6;
  /* second breakpoint*/
  --w2:400px;
  --n2:3;

  display:grid;
  grid-template-columns:
    repeat(auto-fill,
      minmax(clamp(clamp(100%/(var(--n1) + 1) + 0.1%, (var(--w1) - 100vw)*1000,
                         100%/(var(--n2) + 1) + 0.1%), (var(--w2) - 100vw)*1000,
                         100%), 1fr));
  grid-gap:5px;
  margin:10px 0;
}

.container div {
  height:100px;
  border:2px solid;
  background:
    linear-gradient(blue  0 0) 0 /1% calc(var(--w2) - 100vw),
    linear-gradient(green 0 0) 0 /1% calc(var(--w1) - 100vw),
    red;
}

使用 flexbox，我們可以有不同的（可能是想要的）行為，其中一行的最後一項將佔用所有可用空間：

.container {
  /* first breakpoint*/
  --w1:800px;
  --n1:6;
  /* second breakpoint*/
  --w2:400px;
  --n2:3;

  display:flex;
  flex-wrap:wrap;
  margin:10px 0;
}

.container div {
  height:100px;
  border:2px solid;
  margin:5px;
  flex-basis:clamp(clamp(100%/(var(--n1) + 1) + 0.1% ,(var(--w1) - 100vw)*1000, 
                         100%/(var(--n2) + 1) + 0.1%),(var(--w2) - 100vw)*1000, 
                         100%);
  flex-grow:1;
  box-sizing:border-box;
  background:
    linear-gradient(blue  0 0) 0 /1% calc(var(--w2) - 100vw),
    linear-gradient(green 0 0) 0 /1% calc(var(--w1) - 100vw),
    red;
}