Satuan ukuran CSS

Pilih px, %, em, rem, atau vw sesuai kebutuhan.

Pahami konsepnya

Setiap nilai ukuran di CSS punya satuan, dan satuan yang tepat mengubah perilakunya. Piksel (px) bersifat tetap: 16px selalu 16 piksel layar — mudah ditebak untuk border dan detail kecil. Persen (%) bersifat relatif terhadap induknya: width: 50% berarti separuh lebar wadah, sehingga tata letak ikut menyesuaikan.

Lalu ada keluarga relatif-ke-font. em mengacu pada ukuran font elemen itu sendiri — padding: 2em berarti dua kali font elemen; masalahnya em bersarang menggandakan terus (1.2em di dalam 1.2em = 1.44em). rem (root em) menyelesaikannya: ia selalu mengacu pada font akar dokumen, jadi 1.2rem sama di mana pun berada. Praktik modern: rem untuk font dan jarak, px untuk garis dan bayangan.

Terakhir satuan viewport yang mengikuti jendela browser: vw dan vh masing-masing satu persen lebar dan tinggi layar. height: 100vh membuat section setinggi layar penuh — resep hero section di mana-mana. Ada juga ch (lebar karakter "0") yang pas untuk membatasi jumlah kolom teks, misalnya max-width: 70ch untuk baris yang nyaman dibaca.

Coba contoh kode

.hero {
  height: 100vh;         /* setinggi layar */
  padding: 5vh 5vw;      /* jarak ikut ukuran layar */
}

.artikel {
  font-size: 1.1rem;     /* konsisten di mana pun */
  max-width: 70ch;       /* ±70 karakter per baris */
}

.avatar {
  width: 64px;           /* tetap, tak terpengaruh font */
  border: 2px solid #333;
}

Perhatikan pembagian tugasnya: vh/vw untuk panggung besar, rem untuk isi yang harus konsisten, ch untuk lebar bacaan, dan px untuk detail yang memang harus presisi. Mengganti font-size akar (html { font-size: 18px }) otomatis menskalakan semua rem — satu tuas mengatur seluruh tipografi.

Jebakan em yang bersarang

ul { font-size: 1.2em; }
li { font-size: 1.2em; } /* li di ul makin besar terus */

/* perbaikannya: */
ul { font-size: 1.2rem; }
li { font-size: 1rem; }

Daftar bersarang dengan em membuat tiap level mewarisi lalu menggandakan — butir level tiga bisa dua kali lebih besar dari level satu. Mengalihkan ke rem memutus perberatan karena semuanya menghitung dari akar yang sama.

Latihan singkat

Bangun hero 100vh dengan judul 2.5rem dan artikel max-width 70ch, lalu ubah font akar ke 18px dan rasakan semuanya ikut menskalakan.