Bagaimana untuk Mencapai Reka Letak Mudah Alih 3 Lajur kepada 1 Lajur Tanpa Pertanyaan Media?

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

Mencipta reka letak fleksibel yang menyesuaikan diri dengan saiz skrin yang berbeza ialah cabaran reka bentuk web yang biasa. Walaupun pertanyaan media adalah penyelesaian yang boleh dipercayai, mereka boleh memperkenalkan titik putus yang tidak perlu dalam reka letak. Artikel ini meneroka pendekatan alternatif untuk mencapai reka letak mudah alih 3 lajur hingga 1 lajur tanpa menggunakan pertanyaan media.

Masalah:

Selalunya, tapak web menginginkan 3- reka letak lajur pada desktop, beralih kepada reka letak lajur tunggal pada peranti mudah alih. Walau bagaimanapun, semasa peralihan daripada berbilang lajur kepada susun atur satu lajur, peringkat pertengahan berlaku apabila lajur menjadi sempit dan herot. Percubaan untuk menggunakan clamp(), minmax(), dan fungsi lain selalunya membuahkan hasil yang tidak memuaskan.

Penyelesaian:

Penyelesaian yang dicadangkan menggunakan asas-flex dengan formula yang berkesan mencipta titik putus tanpa pertanyaan media. Formulanya ialah:

max(0px, (target-screen-size - 100vw)*1000)

Sebagai contoh, untuk mencipta titik putus pada saiz skrin 400px:

max(0px, (400px - 100vw)*1000)

Jika skrin lebih lebar daripada 400px, formula akan mengembalikan 0px, memastikan lajur tidak terjejas. Jika tidak, ia akan mengembalikan nilai yang besar, dengan berkesan memaksa pemisah baris dan mencipta reka letak satu lajur.

Pelaksanaan:

Gunakan formula pada asas-flex daripada anak-anak kontena:

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

Pendekatan ini menghilangkan keperluan untuk pertanyaan media yang jelas sambil menyediakan peralihan yang lebih lancar antara reka letak lajur.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Reka Letak Mudah Alih 3 Lajur kepada 1 Lajur Tanpa Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!