Vom 3-Spalten-Desktop- zum 1-Spalten-Mobillayout ohne Medienabfragen

Question

Hier werden einige Fragen behandelt, aber sie lösen das von mir gesuchte Problem nicht ganz.

Angenommen, ich habe eine Website und ich möchte sie. Auf dem Desktop möchte ich Folgendes:

Es ist ganz einfach. grid-template-columns: 重复(3, 33%) (Grundsätzlich)

Aber auf dem Handy möchte ich das

Was mir begegnete, geschah, bevor es zu einer einzigen Spalte wurde:

Ich versuche clamp()、minmax() und alles Mögliche, aber nichts funktioniert so, wie ich es möchte. Ja, ich könnte definitiv Medienabfragen verwenden, aber ich möchte mit modernem CSS (wie Clamp, Grid, Minmax usw.) ein wirklich flüssiges Raster-/Flex-Layout erstellen, sodass keine Medienabfragen erforderlich sind, um grundlegende Layoutänderungen vorzunehmen. < /p>

Ich weiß, dass das nicht funktioniert, aber als Ausgangspunkt für Anfragen hier eine einfache Version eines meiner 100 Versuche :) In dieser Version versuche ich, mit der Klammer von „Wiederholung(3)“ zu „Wiederholung(1)“ zu wechseln. .

.wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}

<div class="wrapper">
  <div class="item one"><h3>Example A</h3></div>
  <div class="item two"><h3>Example Two</h3></div>
  <div class="item three"><h3>Third Example</h3></div>
</div>

Answer 1

^{包含更通用规则的完整文章：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;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

使用 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;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

一个类似的问题，我控制没有媒体查询的最大列数：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;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

要了解这些值，请考虑以下范围：

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;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="--w1:900px;--n1:8;--w2:500px;--n2:4;grid-gap:10px;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="--w1:600px;--n1:4;--n2:2;grid-gap:2vw;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

使用 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;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="--w1:900px;--n1:8;--w2:500px;--n2:4;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="--w1:600px;--n1:4;--n2:2;">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>