Unit CSS terbagi menjadi absolut (tetap) dan relatif (skala dengan sesuatu). Memilih dengan baik sangat penting untuk tata letak responsif dan dapat diakses.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Gunakan untuk hal yang tidak boleh diskalakan (border, detail tetap kecil).
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em menggabungkan melalui penyarangan (anak dari anak mengalikan), yang dapat meningkat secara tidak terduga. rem selalu merujuk ke akar, jadi dapat diprediksi — pilihan standar untuk ukuran font dan spasi. Gunakan em ketika Anda ingin pengukuran relatif terhadap font lokal (mis. padding pada tombol yang diskalakan dengan teksnya).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Menggunakan rem untuk tipe menghormati pengguna yang menetapkan font standar lebih besar — keuntungan aksesibilitas nyata yang px merusak.
Unit yang tepat membuat tata letak responsif dan dapat diakses: rem untuk tipe/spasi (dapat diprediksi + menghormati setelan pengguna), %/vw/vh untuk tata letak cair, px untuk detail tetap, dan em untuk pengukuran relatif lokal.
Unit viewport yang lebih baru (dvh, svh) juga memperbaiki masalah tinggi bilah alamat seluler.