Rumah >hujung hadapan web >tutorial css >Peratusan lwn. Unit `fr` dalam Grid CSS: Apakah Perbezaannya?

Peratusan lwn. Unit `fr` dalam Grid CSS: Apakah Perbezaannya?

Barbara Streisand
Barbara Streisandasal
2024-12-16 01:54:18130semak imbas

Percentages vs. `fr` Units in CSS Grid: What's the Difference?

Apakah Perbezaan Antara Peratusan dan Unit fr?

Apabila menggunakan Reka Letak Grid CSS, terdapat dua unit biasa untuk mentakrifkan lebar lajur: peratusan (%) dan unit fr. Walaupun kedua-dua unit boleh digunakan untuk membuat reka letak grid yang fleksibel, ia berkelakuan berbeza dalam situasi tertentu.

Unit Peratusan (%)

Unit peratusan ialah unit relatif yang merujuk kepada lebar bekas. Sebagai contoh, lajur dengan lebar 50% akan mengambil separuh daripada lebar bekas. Unit peratusan sering digunakan untuk membuat lajur lebar tetap.

Walau bagaimanapun, unit peratusan boleh menyebabkan masalah apabila lebar bekas tidak ditakrifkan dengan jelas. Sebagai contoh, jika bekas mempunyai lebar auto, lajur akan membesar atau mengecut agar sesuai dengan ruang yang tersedia. Ini boleh membawa kepada tingkah laku yang tidak diingini, terutamanya dalam reka bentuk responsif.

fr Unit

fr unit ialah unit relatif yang merujuk kepada ruang kosong yang tersedia dalam bekas. Sebagai contoh, lajur dengan lebar 1fr akan mengambil satu bahagian yang sama daripada ruang kosong dalam bekas. unit fr sering digunakan untuk membuat lajur fleksibel yang melaraskan secara automatik kepada ruang yang tersedia.

unit fr tidak terjejas oleh lebar bekas. Sebagai contoh, jika bekas mempunyai lebar auto, lajur masih akan mengambil satu bahagian yang sama daripada ruang kosong. Ini menjadikan unit fr sesuai untuk mencipta reka letak grid responsif.

Kesimpulan

Unit peratusan berguna untuk mencipta lajur lebar tetap, manakala unit fr berguna untuk mencipta lajur fleksibel. Apabila memilih unit yang hendak digunakan, adalah penting untuk mempertimbangkan gelagat lajur yang diingini.

Atas ialah kandungan terperinci Peratusan lwn. Unit `fr` dalam Grid CSS: Apakah Perbezaannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn