Satuan di CSS: px, em, rem, %, vw/vh

Kenapa satuan itu penting?

Pilih satuan yang salah dan websitemu bisa pecah di layar HP atau teksnya tidak bisa diperbesar pengguna. Setiap satuan punya "rujukan" berbeda untuk menghitung ukuran akhirnya.

px: piksel, absolut

h1 {
  font-size: 32px;
}

px itu tetap: 32px selalu 32px di mana pun. Gampang diprediksi, cocok buat hal yang memang harus presisi seperti border 1px atau bayangan. Kelemahannya: tidak mengikuti pengaturan ukuran font pengguna di browser.

em: relatif ke induk

1em = ukuran font elemen induknya. Kalau induknya font-size: 16px, maka 2em = 32px.

article {
  font-size: 16px;
}
article h2 {
  font-size: 1.5em; /* 24px */
}

Masalahnya: em menumpuk. Kalau ada tiga level bersarang yang masing-masing 1.2em, ukurannya jadi 1.2 x 1.2 x 1.2. Ini sumber bug klasik.

rem: relatif ke root

1rem = ukuran font elemen <html> (default browser 16px). Tidak peduli seberapa dalam bersarangnya, 2rem selalu 32px kalau root-nya 16px.

html {
  font-size: 16px;
}
h1 {
  font-size: 2rem;   /* selalu 32px */
}
p {
  font-size: 1rem;   /* selalu 16px */
}

Aturan praktis: untuk ukuran font, pakai rem. Konsisten dan menghormati pengaturan aksesibilitas pengguna.

%: relatif ke induk

Persen menghitung dari ukuran elemen induknya. Paling sering dipakai buat lebar:

.kolom {
  width: 50%; /* setengah dari lebar induknya */
}
img {
  max-width: 100%; /* tidak akan lebih lebar dari wadahnya */
}

max-width: 100% pada gambar adalah salah satu baris CSS paling penting buat web responsif.

vw dan vh: relatif ke viewport

1vw = 1% lebar layar browser, 1vh = 1% tingginya.

.hero {
  height: 100vh; /* setinggi layar penuh */
}
.judul-besar {
  font-size: 8vw; /* membesar-mengecil mengikuti lebar layar */
}

Catatan teknis: 100vh di browser HP kadang bermasalah karena address bar yang muncul-hilang mengubah tinggi viewport. Solusi modernnya adalah 100dvh (dynamic viewport height) yang mengikuti tinggi aktual. Kalau targetmu banyak pengguna mobile, pakai dvh.

Panduan cepat

• Font: rem
• Lebar kolom responsif: %
• Elemen setinggi/selebar layar: vw/vh/dvh
• Border, bayangan, detail presisi: px
• em: hanya kalau kamu memang butuh relatif ke induk (misal padding tombol mengikuti ukuran font tombol itu sendiri)

Rangkuman

px itu absolut dan kaku, rem konsisten mengikuti root, persen mengikuti induk, vw/vh mengikuti layar. Kombinasi yang tepat bikin websitemu lentur di semua ukuran layar tanpa perlu banyak kode tambahan.