Bolehkah Anda Mencapai Reka Letak Lajur Bendalir Tanpa Pertanyaan Media?

Mencapai Reka Letak Lajur Bendalir Tanpa Pertanyaan Media

Teknik CSS moden menawarkan pilihan serba boleh untuk mencipta reka letak responsif yang menyesuaikan dengan lancar kepada saiz skrin yang berbeza. Ini menghapuskan keperluan untuk berbilang pertanyaan media dan membolehkan penciptaan reka letak yang mengalir dengan lancar merentas peranti.

Dalam artikel ini, kami meneroka cara untuk mencapai senario reka letak tertentu: reka letak tiga lajur pada paparan desktop, peralihan kepada reka letak satu lajur pada paparan mudah alih, tanpa bergantung pada pertanyaan media.

The Cabaran

Cabaran utama terletak pada peralihan dengan lancar daripada susun atur tiga lajur kepada satu lajur. Apabila port pandang mengecil, lajur harus runtuh menjadi satu lajur, mengelakkan sebarang peringkat perantaraan yang janggal.

Penyelesaian

Penyelesaian melibatkan penggunaan gabungan flexbox dan fungsi clamp(). Kami menetapkan item flex untuk dibalut dengan flex-wrap: wrap;, dan kemudian menggunakan clamp() dalam sifat flex-basis untuk menentukan lebar setiap item flex berdasarkan lebar viewport.

Kod

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

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

Bagaimana Ia Berfungsi

• Fungsi clamp() mengambil tiga argumen: nilai minimum, nilai pilihan dan nilai maksimum.
• Dalam senario ini, kami menetapkan nilai minimum kepada 0px, nilai pilihan kepada 100%, dan nilai maksimum kepada (400px - 100vw) * 1000.
• Apabila lebar viewport lebih besar daripada 400px, fungsi clamp() mengembalikan nilai pilihan sebanyak 100%, menghasilkan tiga lajur yang sama lebar.
• Apabila lebar viewport berkurangan di bawah 400px, fungsi clamp() mengembalikan nilai yang berkadar dengan perbezaan antara 400px dan semasa lebar port pandangan.
• Ini memaksa item fleksibel untuk dibalut pada berbilang baris, mencipta reka letak satu lajur.

Kesimpulan

Menggunakan fungsi clamp() dan flexbox, kami boleh mencipta reka letak responsif yang menyesuaikan dengan lancar kepada saiz skrin yang berbeza tanpa memerlukan pertanyaan media. Pendekatan ini memberikan pengalaman yang lebih lancar dan mesra pengguna untuk pelawat, memastikan tapak web anda kelihatan hebat pada semua peranti.

Atas ialah kandungan terperinci Bolehkah Anda Mencapai Reka Letak Lajur Bendalir Tanpa Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!