3-lajur desktop kepada 1-lajur reka letak mudah alih tanpa pertanyaan media

Question

Ada beberapa soalan yang dilihat di sini, tetapi ia tidak cukup menyelesaikan masalah yang saya cari.

Andaikan saya mempunyai laman web dan saya mahukannya. Pada desktop saya mahukan ini:

Mudah sahaja. grid-template-columns: 重复(3, 33%) (Pada asasnya)

Tetapi, pada telefon bimbit, saya mahukan ini

Apa yang saya temui berlaku sebelum ia bertukar kepada satu lajur:

Saya cuba clamp()、minmax() dan semua jenis barangan, tetapi tiada apa yang berfungsi seperti yang saya mahukan. Ya, saya pasti boleh menggunakan pertanyaan media, tetapi saya ingin mencipta susun atur grid/flex yang benar-benar cair menggunakan CSS moden (seperti pengapit, grid, minmax, dll.) supaya tiada pertanyaan media diperlukan untuk membuat perubahan reka letak asas. < /p>

Saya tahu ini tidak berfungsi, tetapi sebagai titik permulaan untuk permintaan, berikut ialah versi ringkas salah satu daripada 100 percubaan saya :) Dalam versi ini, saya cuba beralih daripada repeat(3) kepada repeat(1) menggunakan pengapit) .

.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

^{Artikel penuh dengan peraturan yang lebih umum: https://css-tricks.com/responsive-layouts-fewer-media-queries/}

Ini digunakan dalam asas fleksibel 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>

Menggunakan Grid CSS, ia boleh kelihatan seperti ini:

.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>

Soalan serupa di mana saya mengawal bilangan maksimum lajur tanpa pertanyaan media: Grid CSS - Bilangan maksimum lajur tanpa pertanyaan media

---

Kami boleh melanjutkan penyelesaian di atas untuk mempertimbangkan kes yang lebih kompleks.

Contoh peralihan daripada 6 lajur kepada 3 lajur kepada 1 lajur:

.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>

Untuk memahami nilai ini, pertimbangkan julat berikut:

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

Untuk mendapatkan 6 lajur kami perlukan ]14.3% 16.7%] 范围内的值（我考虑的是 15%) Untuk mendapatkan 3 ruangan kita perlukan ]25% 33.3%] 范围内的值（我考虑的是 30%)

Kami hanya mengelakkan tepi untuk memastikan kami mengambil kira jurang.

Penyelesaian yang lebih umum menggunakan pembolehubah CSS, di mana saya akan menambah 0.1% untuk memastikan nilainya cukup besar untuk mendapatkan bilangan lajur yang diingini dan boleh menampung jurang.

Kami juga menambah beberapa pewarna dinamik (berkaitan: Bagaimana untuk menukar warna elemen

berdasarkan ketinggian atau lebarnya? )

.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>

Dengan flexbox kita boleh mempunyai gelagat berbeza (mungkin diingini) di mana item terakhir baris akan menggunakan semua ruang yang ada:

.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>