Unit CSS pisah dadi absolut (tetep) lan relatif (berkembang nganggo barang). Milih kanthi bener penting banget kanggo layout responsif lan accessible.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Gunakake kanggo barang-barang sing ora kudu berkembang (pinggiran, detail tetep cilik).
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 gabung-gabungan liwat nested (murid murid muridi kalikan), kang bisa njomplang ora diduga. rem tansah ngreferensi akar, dadi bisa diperkirakake — pilihan utama kanggo ukuran font lan jarak. Gunakake em nalika sampeyan pengen ukuran relatif marang font lokal (contone padding tombol sing berkembang karo teks).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Ngunakake rem kanggo tipe ngormati panggunne sing ngatur font gede — kuntul accessibility sejatine kang px ngobar.
Unit sing bener nggawe layout responsif lan accessible: rem kanggo tipe/jarak (bisa diperkirakake + ngormati pangaturan pengguna), %/vw/vh kanggo layout cair, px kanggo detail tetep, lan em kanggo ukuran relatif lokal.
Unit viewport anyar (dvh, svh) uga nyengkuyung masalah dhuwur address bar mobile.