Responsive Units

Layout responsif pada dasarnya adalah soal memilih satuan yang benar untuk setiap kebutuhan. Kita sudah mempelajari satuan-satuan ini satu per satu di section Values, Units, dan Sizing; chapter ini merangkai ulang semuanya dari sudut pandang responsivitas: satuan mana yang cocok untuk tugas mana, dan kapan satuan viewport yang terlihat serbaguna justru menimbulkan masalah baru.

Kotak Peralatan Satuan #

Setiap satuan merespons perubahan terhadap acuan yang berbeda — dan itulah kuncinya:

Prinsip pemilihannya: pilih satuan yang acuannya sama dengan perilaku yang kita inginkan. Kolom harus mengikuti container — pakai %. Spasi harus mengikuti skala font pengguna — pakai rem. Panjang baris harus mengikuti font, bukan piksel — pakai ch.

Kapan Satuan Viewport Justru Mengganggu #

vw dan vh terlihat sempurna di atas kertas, tetapi keduanya punya dua jebakan terkenal:

• 100vw ikut menghitung scrollbar pada sejumlah platform. Di halaman yang bisa discroll, lebar viewport sebenarnya adalah lebar jendela dikurangi scrollbar — tetapi 100vw mengabaikannya. Akibatnya elemen selebar 100vw sedikit melebihi ruang yang tersedia dan memicu scroll horizontal.
• 100vh pada ponsel lebih tinggi dari yang terlihat. Browser ponsel punya address bar yang muncul-hilang saat halaman discroll. vh dihitung terhadap tinggi terbesar (saat address bar menutup), sehingga hero setinggi 100vh terpotong sebagian di bawah layar.

Untuk kasus kedua, CSS kini punya satuan yang lebih akurat. dvh (dynamic viewport height) mengikuti tinggi yang benar-benar terlihat saat ini, termasuk saat address bar berubah:

.hero-halaman {
  min-height: 100dvh;   /* tinggi viewport dinamis — akurat di ponsel */
  display: grid;
  place-items: center;
}

Satuan pendampingnya: svh (tinggi terkecil, address bar terbuka) dan lvh (tinggi terbesar). Bila perlu mendukung browser lama, tulis 100vh lebih dulu lalu 100dvh sebagai penimpanya.

Satuan viewport paling bermanfaat untuk detail kecil seperti spacing. Demo berikut membandingkan padding tetap dan padding fluid di dua panel:

.panel-padding--tetap { padding: 16px; }
.panel-padding--fluid { padding: clamp(1rem, 4vw, 2.5rem); }

Perkecil dan perbesar jendela browser, lalu bandingkan jarak di dalam kedua panel pada lebar yang berbeda. Batas clamp()-nya juga bukan angka acak: minimum 1rem menjaga spacing tetap lega di ponsel, maksimum 2.5rem mencegah ruang berlebihan di layar lebar.

Unit Container: Respons terhadap Wadah #

Satuan vw selalu mengukur viewport — padahal sering kali yang ingin kita respons adalah wadah komponen, bukan seluruh layar. Kartu di sidebar dan kartu di area utama memakai komponen yang sama, tetapi lebar wadahnya berbeda jauh. Di sinilah container queries masuk: fitur yang kini didukung luas sejak Agustus 2025 dan menyediakan satuannya sendiri — cqi setara 1% lebar wadah container.

Contoh bentuk paling sederhananya:

.panel-widget {
  container-type: inline-size; /* wadah ini jadi acuan cqi */
}
.isi-widget {
  padding: clamp(0.75rem, 4cqi, 1.5rem); /* skala mengikuti lebar wadah */
}

Kita akan membedah container queries menyeluruh pada bagian lanjutan; untuk sekarang cukup dicatat bahwa kotak peralatan responsif kita tidak lagi terbatas pada viewport.

Ringkasan #

Setiap satuan punya acuan sendiri: persen mengikuti induk, rem mengikuti root, ch mengikuti font, dan satuan viewport mengikuti layar. Satuan viewport kuat untuk detail kecil, tetapi 100vw bisa memicu scroll horizontal lewat scrollbar dan 100vh terpotong address bar ponsel — dvh menyelesaikan masalah keduanya untuk tinggi. Dengan kotak peralatan satuan yang siap, kita kini menerapkannya pada elemen yang paling terasa dampaknya: tipografi.