Satuan Ukuran: px, %, em, rem, vw, vh
Memahami satuan absolut dan relatif, kapan memakai px, persen, em, rem, serta satuan viewport vw dan vh.
Mengapa banyak satuan?
Layar berbeda-beda: ponsel kecil, laptop, monitor besar. Karena itu CSS punya satuan absolut (tetap) dan relatif (menyesuaikan sesuatu).
| Satuan | Jenis | Relatif terhadap | Pakai untuk |
|---|---|---|---|
px | Absolut | Satu titik layar | Garis tipis, bayangan, ukuran tetap |
% | Relatif | Ukuran elemen induk | Lebar kolom |
em | Relatif | Ukuran font elemen itu sendiri/induknya | Jarak yang mengikuti teks |
rem | Relatif | Ukuran font elemen html (root) | Ukuran font, jarak umum |
vw | Relatif | 1% lebar jendela browser | Elemen selebar layar |
vh | Relatif | 1% tinggi jendela browser | Bagian setinggi layar (hero) |
px: pasti, tapi kaku
px selalu sama besar. Cocok untuk detail kecil seperti garis tepi 1px. Namun jika dipakai untuk semua ukuran font, pengguna yang memperbesar font browser tidak merasakan efeknya.
%: mengikuti induk
.kolom { width: 50%; } /* setengah lebar induk */rem: kawan terbaik tipografi
Secara bawaan, browser mengatur ukuran font root 16px. Maka 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px. Jika pengguna mengubah ukuran font di pengaturan browser, semua ukuran ber-rem ikut menyesuaikan. Ini ramah aksesibilitas.
html { font-size: 100%; } /* jangan ubah ke px */
h1 { font-size: 2.5rem; } /* 40px */
p { font-size: 1rem; } /* 16px */em: mengikuti font sekitar
1em sama dengan ukuran font elemen itu. Berguna untuk jarak yang harus "ikut membesar" bila teksnya membesar, misalnya padding tombol 0.5em 1em. Hati-hati: em bersarang menumpuk (induk 1.2em, anak 1.2em → 1.44 kali).
vw dan vh
.hero { height: 100vh; } /* setinggi layar */
.lebar { width: 50vw; } /* setengah lebar layar */Aturan praktis
- font-size:
rem. - garis tepi, bayangan:
px. - lebar kolom:
%ataufr/max-width. - tinggi bagian layar penuh:
vh.
Angka 0 tidak butuh satuan: margin: 0;, bukan 0px.