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

Question

Terdapat beberapa soalan yang dilihat di sini, tetapi ia tidak cukup menyelesaikan masalah yang saya cari. Katakan saya mempunyai laman web dan saya mahu. Pada desktop saya mahu ini: Ini mudah. grid-template-columns: pendua (3,33%) (pada asasnya) Walau bagaimanapun, pada mudah alih saya mahu perkara ini berlaku sebelum ia bertukar kepada satu lajur: Saya cuba clamp(), minmax () dan semua jenis barangan, tetapi tiada apa yang berfungsi seperti yang saya mahu. Ya, saya boleh menggunakan pertanyaan media sepenuhnya tetapi saya mahu menggunakan moden

P粉070918777 · Answer

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

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

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

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

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