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

Unit CSS: Meneroka Perbezaan antara vh/vw dan %

Pengenalan

Dalam dalam bidang penggayaan CSS, pelbagai unit boleh digunakan untuk menentukan dimensi elemen. Antaranya, vh dan vw adalah unit yang agak baharu yang telah mencetuskan sedikit kekeliruan kerana persepsi persamaannya dengan unit peratusan yang lebih biasa. Artikel ini meneroka perbezaan asas antara unit ini untuk menjelaskan senario aplikasi unik mereka.

vh dan vw: Peratusan Port Pandangan

Seperti yang dicadangkan oleh soalan, vh (tinggi viewport) dan vw (lebar viewport) ialah unit yang mengukur peratusan ketinggian dan lebar viewport semasa, masing-masing. Sebagai contoh, 100vh mewakili 100% ketinggian paparan semasa.

Unit Peratusan (%): Relatif kepada Elemen Induk

Berbeza dengan vh dan vw, unit peratusan (%) menyatakan nilai relatif kepada saiz elemen induk. Ini bermakna ketinggian 100% akan sentiasa mewakili 100% ketinggian induk elemen, tanpa mengira saiz port pandangan.

Faktor Pembeza Utama: Ketergantungan Viewport

Perbezaan penting antara vh/vw dan % terletak pada pergantungan mereka pada port pandangan. unit vh dan vw direka bentuk untuk menskala secara dinamik dengan port pandangan, memastikan bahawa dimensi elemen menyesuaikan dengan sewajarnya apabila pengguna mengubah saiz tetingkap penyemak imbas atau menavigasi ke peranti yang berbeza.

Sebagai contoh, menetapkan ketinggian elemen kepada 100vh akan menjamin bahawa ia memenuhi keseluruhan ketinggian port pandangan, tanpa mengira resolusi skrin atau peranti tertentu. Sebaliknya, ketinggian 100% hanya akan mengisi ketinggian elemen induk, yang berpotensi meninggalkan ruang kosong di bawah elemen jika induk mempunyai ketinggian yang lebih kecil daripada port pandangan.

Contoh Praktikal

Pertimbangkan kod HTML dan CSS yang disediakan coretan:

<div class="parent">
    <div class="child">100% height (parent is 200px)</div>
</div>
<div class="viewport-height">100vh height</div>

body, html { height: 100%; }
.parent { height: 200px; }
.child { height: 100%; }
.viewport-height { height: 100vh; }

Dalam senario ini, menetapkan ketinggian kanak-kanak kepada 100% akan menjadikannya memenuhi keseluruhan ketinggian div induk (200px), meninggalkan ruang kosong di bawah. Walau bagaimanapun, menetapkan ketinggian viewport-height div kepada 100vh akan menjadikannya memenuhi keseluruhan ketinggian viewport, tanpa mengira saiz induk atau resolusi skrin.

Kesimpulan

Walaupun unit vh/vw dan % mungkin kelihatan serupa pada permukaan, kebergantungan asasnya pada port pandangan menetapkannya berpisah. unit vh dan vw amat berguna untuk mencipta reka letak responsif yang menyesuaikan dengan lancar pada saiz skrin yang berbeza-beza, memastikan pengalaman pengguna yang konsisten merentas peranti.

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