Bagaimana untuk Mencipta Susun Atur 3-Lajur Bendalir kepada 1-Lajur Tanpa Pertanyaan Media?

Tanpa Pertanyaan Media: Mencapai Desktop 3 Lajur Cecair kepada Reka Letak Mudah Alih 1 Lajur

Pertanyaan media tradisional memainkan peranan penting dalam menyesuaikan reka letak laman web kepada pelbagai saiz skrin. Walau bagaimanapun, dalam usaha mencipta reka bentuk yang benar-benar lancar dan responsif, terdapat keinginan untuk meneroka penyelesaian alternatif yang menghapuskan keperluan untuk pertanyaan media.

Pertimbangkan tapak web dengan reka letak 3 lajur pada desktop:

| | | ---| ---| ---| | 1 | 2 | 3 |

|
---|
| 1 |
| 2 |
| 3 |

Fungsi repeat() mencipta bilangan lajur yang ditentukan dan clamp() memastikan minimum 1 lajur apabila viewport mengecut di bawah 500px.

Flexbox dan Margin Negatif

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

Pendekatan ini memastikan item dijajarkan sebelah-menyebelah pada skrin yang lebih besar tetapi disusun secara menegak pada skrin yang lebih sempit. Jidar negatif pada mulanya mencipta pertindihan, yang dibetulkan dengan mengalih keluarnya pada skrin yang lebih kecil.

Kesimpulan

Dengan memanfaatkan grid, pengapit, kotak lentur dan jidar negatif, ia mungkin untuk mencipta reka letak bendalir yang menyesuaikan dengan lancar antara berbilang lajur dan satu lajur, menghapuskan keperluan untuk pertanyaan media untuk perubahan reka letak asas.

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

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