VW lwn VH lwn. %: Bilakah Anda Harus Menggunakan Unit Relatif Viewport dalam CSS?

Memahami vh/vw vs. %: Panduan untuk Unit Relatif Viewport dalam CSS

Manakala % unit mengukur peratusan elemen berbanding bekas induknya, unit vw dan vh direka khusus untuk mengukur peratusan ketinggian tempat pandang dan lebar, masing-masing. Perbezaan ini menjadi kritikal apabila bekas induk elemen bukan port pandangan itu sendiri.

Dalam kes di mana ketinggian atau lebar bekas induk adalah dinamik atau berbeza daripada port pandangan, unit vw dan vh memastikan saiz yang konsisten. Sebagai contoh, jika elemen ditetapkan kepada ketinggian 100% dalam div induk yang tingginya 1000px, ketinggian sebenar boleh berbeza-beza bergantung pada saiz port pandangan.

Sebaliknya, menetapkan elemen yang sama kepada 100vh akan memastikan ia sentiasa menduduki 100% ketinggian port pandangan, tanpa mengira dimensi div induk. Ini menghapuskan potensi saiz yang tidak konsisten dalam reka bentuk web responsif.

Untuk menggambarkan perbezaan ini, pertimbangkan contoh kod berikut:

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

Dalam contoh ini, anak div dalam div induk akan mempunyai ketinggian yang 100% daripada ketinggian div induk (200px). Walau bagaimanapun, div ketinggian viewport akan sentiasa mempunyai ketinggian 100% daripada ketinggian viewport, walaupun ketinggian div induk berubah.

Oleh itu, unit vw dan vh memberikan kawalan yang lebih tepat ke atas saiz elemen dalam berhubung dengan port pandangan, menjadikannya amat berguna untuk mencipta reka letak web responsif yang menyesuaikan dengan lancar kepada saiz dan aspek skrin yang berbeza-beza nisbah.

Atas ialah kandungan terperinci VW lwn VH lwn. %: Bilakah Anda Harus Menggunakan Unit Relatif Viewport dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!