Bagaimana untuk Mencipta Susun Atur Grid Bendalir dengan Desktop 3 Lajur dan Mudah Alih 1 Lajur Tanpa Pertanyaan Media?

Mencapai Desktop 3 Lajur dan Reka Letak Mudah Alih 1 Lajur Tanpa Pertanyaan Media

Masalah:
Bagaimana kita boleh mencipta susun atur grid cecair yang bertukar daripada reka letak desktop 3 lajur kepada reka letak mudah alih 1 lajur tanpa bergantung pada pertanyaan media?

Penyelesaian:
CSS membolehkan dinamik pelarasan susun atur tanpa bergantung pada pertanyaan media. Begini caranya:

1. Menggunakan Clamp() dan Flex:
Dalam CSS awal anda, anda menggunakan clamp() dalam sifat grid-template-columns untuk bertukar daripada repeat(3) kepada repeat(1) berdasarkan saiz skrin. Walau bagaimanapun, clamp() sahaja tidak memberikan hasil yang diingini. Sebaliknya, kita boleh menggunakan clamp() dalam sifat flex-basis item flex untuk mencipta gelagat pembalut:

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

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

2. Laraskan Formula Mengikut Saiz Skrin:
Dalam kod ini, 400px mewakili saiz skrin di mana reka letak harus bertukar daripada 3 lajur kepada 1 lajur. Anda boleh melaraskan nilai ini berdasarkan titik putus yang anda inginkan. Contohnya, untuk menukar pada 500px, gantikan 400px dengan 500px.

3. Penjelasan Pengiraan:
Formula maks(0px, (400px - 100vw) * 1000) memastikan bahawa asas-flex bagi setiap item kekal pada 0px apabila lebar port pandang lebih besar daripada 400px. Ini memastikan mereka bersebelahan dalam susun atur 3 lajur. Walau bagaimanapun, apabila lebar port pandangan berkurangan di bawah 400px, asas-flex menjadi nilai yang besar, dengan berkesan menolak item ke baris berasingan, menghasilkan reka letak 1 lajur.

Dengan menggunakan clamp() dengan cara ini, anda boleh mencapai reka letak yang lancar dan responsif yang menyesuaikan diri dengan saiz skrin yang berbeza tanpa memerlukan pertanyaan media.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Susun Atur Grid Bendalir dengan Desktop 3 Lajur dan Mudah Alih 1 Lajur Tanpa Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!