Unit Area Pandang: vw, vh, dvh

Unit area pandang bersifat relatif terhadap ukuran area pandang peramban (area yang terlihat dari jendela peramban). Unit ini memungkinkan tata letak dan tipografi yang berskala mengikuti ruang layar yang tersedia.

1vw = 1% dari lebar area pandang. 100vw mengisi seluruh lebar area pandang. Unit ini berguna untuk elemen selebar penuh tanpa kerumitan persentase.

1vh = 1% dari tinggi area pandang. 100vh mengisi seluruh tinggi area pandang. Unit ini umum digunakan untuk bagian hero dan modal yang memenuhi layar.

Pada peramban seluler, tinggi area pandang berubah ketika UI peramban (bilah alamat) ditampilkan atau disembunyikan saat menggulir. 100vh dapat menyertakan atau mengecualikan elemen antarmuka peramban secara tidak konsisten sehingga sebagian konten bisa tersembunyi.

dvh (tinggi area pandang dinamis) diperbarui secara dinamis untuk mencerminkan tinggi aktual yang terlihat setelah UI peramban menyesuaikan diri. Unit ini mengatasi masalah 100vh di perangkat seluler.

CSS juga menyediakan svh (tinggi area pandang kecil — selalu mengecualikan UI peramban) dan lvh (tinggi area pandang besar — seolah-olah UI disembunyikan). Unit-unit ini memungkinkan pengendalian yang lebih presisi atas perilaku area pandang seluler.

Menggunakan vw untuk font-size membuat teks berskala mengikuti layar:

100vw menyertakan lebar bilah gulir pada komputer desktop. Hal ini menyebabkan luapan horizontal jika digunakan secara sembarangan. Sebaiknya gunakan width: 100% pada elemen blok dan gunakan vw hanya untuk kasus tertentu.

1vmin = 1% dari dimensi area pandang yang lebih kecil (lebar atau tinggi). 1vmax = 1% dari dimensi yang lebih besar. Unit ini berguna untuk wadah persegi yang menyesuaikan diri terhadap perubahan orientasi.

Seperti varian tinggi, CSS menyediakan svw, lvw, dan dvw untuk lebar. Varian dinamis (dvw, dvh) paling berguna pada perangkat seluler.

Pola unit area pandang yang umum:

• min-height: 100dvh — bagian yang memenuhi layar dan aman untuk perangkat seluler
• height: 100svh — panel UI tetap
• font-size: clamp(1rem, 2.5vw, 2rem) — judul fleksibel
• width: min(800px, 90vw) — wadah dengan lebar yang aman

vw dan vh adalah 1% dari lebar/tinggi area pandang. Pada perangkat seluler, vh tidak dapat diandalkan karena elemen antarmuka peramban. Gunakan dvh untuk tata letak layar penuh yang dinamis dan akurat pada perangkat seluler. vmin dan vmax merespons dimensi area pandang yang lebih kecil atau lebih besar.