Apakah Perbezaan Utama Antara Unit `vh/vw` dan `%` CSS?

Perbezaan antara vh/vw dan % dalam Unit CSS

Unit CSS seperti vh dan vw menyediakan pembangun dengan pilihan serba boleh untuk menentukan elemen dimensi berbanding dengan ruang pandang. Walau bagaimanapun, persamaan mereka dengan unit % yang lebih tradisional boleh menimbulkan persoalan tentang keistimewaan mereka.

Memahami vh dan vw

vh (tinggi port pandangan) dan vw (lebar port pandangan) ialah unit yang mewakili peratusan ketinggian dan lebar kawasan tontonan, masing-masing. Sebagai contoh, 100vw menandakan 100% lebar port pandangan, tanpa mengira saiz skrin sebenar peranti.

Perbandingan dengan %

Pada pandangan pertama, unit vh/vw nampaknya berlebihan kerana % juga mewakili peratusan beberapa elemen induk. Walau bagaimanapun, perbezaan utama terletak pada kerangka rujukan.

Ketinggian lwn. Ketinggian Viewport

Unit % biasanya mengukur dimensi berbanding ketinggian elemen induknya . Contohnya, elemen kanak-kanak dengan ketinggian 100% akan menduduki ketinggian penuh induknya, tanpa mengira saiz port pandangan.

Sebaliknya, unit vh dan vw mengukur dimensi berbanding dengan ketinggian dan lebar port pandangan. Ini bermakna elemen 100vh akan sentiasa menduduki 100% ketinggian viewport, tanpa mengira saiz elemen induknya.

Contoh

Pertimbangkan elemen div induk dengan ketinggian sebanyak 200px dan elemen div kanak-kanak ditetapkan kepada ketinggian 100%. Walaupun 100% biasanya bermaksud "100% ibu bapa", dalam kes ini, div kanak-kanak berpotensi melangkaui ketinggian port pandangan.

Walau bagaimanapun, jika div kanak-kanak ditetapkan kepada 100vh, ia akan sentiasa menduduki 100% ketinggian viewport, memastikan reka letak responsif dan konsisten sepenuhnya merentas saiz viewport yang berbeza.

Atas ialah kandungan terperinci Apakah Perbezaan Utama Antara Unit `vh/vw` dan `%` CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!