Satuan viewport mengukur elemen relatif terhadap jendela browser — bukan terhadap elemen induk seperti persentase. Satuan ini menjadi andalan untuk hero section yang memenuhi layar, teks judul yang skalanya mengikuti lebar layar, dan overlay yang menutup seluruh jendela. Perbedaannya dengan persentase penting dipahami: width: 50% berarti 50% dari induk, sedangkan width: 50vw berarti 50% dari lebar viewport, di induk mana pun elemen itu berada. Pada Chapter ini kita membahas satuan utama, dua satuan pembandingnya, lalu masalah klasik 100vh di ponsel beserta solusinya.

vw dan vh: Persen dari Jendela Browser #

Satu vw (viewport width) sama dengan 1% lebar viewport, dan satu vh (viewport height) sama dengan 1% tinggi viewport. Angkanya mudah dihitung: pada jendela berukuran 1280×720px, satu vw bernilai 12.8px dan satu vh bernilai 7.2px, sehingga 25vw menghasilkan 320px dan 50vh menghasilkan 360px. Karena rujukannya jendela browser, nilai ini tidak peduli seberapa dalam elemen disarangkan di dalam layout.

vmin dan vmax: Mengikuti Sisi Terpendek atau Terpanjang #

vmin merujuk ke sisi viewport yang lebih pendek, sedangkan vmax merujuk ke sisi yang lebih panjang. Pada jendela 1280×720px, satu vmin bernilai 7.2px (dari tinggi 720px) dan satu vmax bernilai 12.8px (dari lebar 1280px). Kegunaan utama keduanya adalah membuat elemen yang skalanya konsisten di orientasi layar mana pun: bingkai persegi yang selalu memenuhi sisi terpendek, misalnya, dapat ditulis width: 90vmin. Satuan-satuan ini terdokumentasi pada MDN: length .

Satu catatan tentang 100vw: nilai ini mencakup lebar scrollbar vertikal pada desktop, sehingga elemen selebar 100vw dapat sedikit lebih lebar dari area konten dan memunculkan scroll horizontal. Cara aman untuk bagian selebar layar penuh adalah memakai width: 100% pada elemen langsung anak body, dan menyimpan vw untuk kasus yang benar-benar membutuhkannya.

dvh, svh, lvh dan Masalah 100vh di Ponsel #

Di browser ponsel, tinggi viewport berubah saat URL bar muncul dan menyusut ketika pengguna menggulir. Nilai 100vh tidak menyesuaikan dirinya, sehingga elemen setinggi 100vh dapat lebih besar dari area yang terlihat — bagian bawah hero tertutup URL bar. CSS menjawabnya dengan tiga varian yang merupakan Baseline sejak 2023: svh (tinggi viewport terkecil, saat URL bar tampil), lvh (terbesar, saat URL bar sembunyi), dan dvh (dinamis, mengikuti kondisi saat itu). Ketiganya juga tersedia dalam versi lebar — dvw, svw, dan lvw — untuk kasus yang jarang tetapi sama.

Demo: Menghitung vw, vh, vmin, dan vmax #

Demo berikut menampilkan empat bilah yang diukur dengan satuan viewport:

css 
.bar-vw {
  width: 25vw;
}
.bar-vh {
  height: 50vh;
}
.bar-vmin {
  width: 50vmin;
}
.bar-vmax {
  width: 50vmax;
}
.hero {
  height: 100vh;
  height: 100dvh;
}

Mari kita telaah baris demi baris:

  1. Baris 1–3 (.bar-vw): 25% dari lebar viewport; pada jendela 1280px hasilnya 320px.
  2. Baris 4–6 (.bar-vh): 50% dari tinggi viewport; pada jendela 720px hasilnya 360px.
  3. Baris 7–9 (.bar-vmin): 50% dari sisi terpendek (720px), menghasilkan 360px.
  4. Baris 10–12 (.bar-vmax): 50% dari sisi terpanjang (1280px), menghasilkan 640px.
  5. Baris 13–15 (.hero): pola fallback untuk hero section — browser yang tidak mengenal dvh memakai 100vh, browser modern memakai 100dvh yang mengikuti URL bar.

Hasil di Browser:

text 
Pada jendela harness 1280×720px (1vw = 12.8px, 1vh = 7.2px):
bilah 25vw tampil selebar 320px, bilah 50vh setinggi 360px,
bilah 50vmin selebar 360px, dan bilah 50vmax selebar 640px.

Keempat bilah pada demo membawa penanda data-expected yang mengunci nilai computed tersebut. Coba perkecil jendela browser secara manual: semua bilah berubah ukurannya secara langsung karena rujukannya adalah viewport, bukan elemen induk maupun angka tetap.