Satuan CSS: px, em, rem, %, vw, vh dan Kapan Memakainya

Hampir setiap property CSS yang mengatur ukuran selalu butuh angka diikuti satuan — 16px, 1.5em, 100%, 50vw. Selama ini kamu mungkin sudah mengetiknya tanpa terlalu memikirkannya, dan untuk sementara itu nggak masalah. Tapi begitu kamu mulai membuat tata letak yang harus tampil bagus di HP, tablet, sampai layar desktop besar, pilihan satuan berhenti jadi sekadar detail dan berubah jadi inti persoalan.

Ada satuan yang ukurannya tetap, nggak pernah berubah. Ada juga yang sifatnya relatif — membesar dan mengecil mengikuti sesuatu yang lain, misalnya ukuran font induk atau lebar jendela browser. Memahami mana yang mana, dan tiap satuan itu relatif terhadap apa, adalah pembeda antara tata letak yang lentur menyesuaikan diri dengan yang langsung berantakan begitu pengguna memperbesar tampilan atau memutar HP-nya. Yuk kita bahas satu keluarga satuan ini.

Satuan absolut: px dan kawan-kawannya

Satuan absolut itu ukurannya pasti. Dia nggak peduli sama elemen induk, pengaturan pengguna, atau ukuran layar — 10px ya tetap 10px di mana pun. Yang paling sering kamu pakai adalah pixel:

.box {
  width: 200px;
  padding: 16px;
  border: 1px solid black;
}

Sebenarnya pixel di CSS sudah nggak persis sama dengan pixel fisik di layar (layar modern beresolusi tinggi bikin urusan ini agak kabur), tapi untuk keperluan sehari-hari kamu bisa menganggap px sebagai satuan kecil yang tetap dan bisa diandalkan. Dia presisi dan gampang ditebak, dan justru itulah alasan orang suka memakainya — sekaligus alasan dia bisa bikin masalah. Judul yang dipatok 40px akan tampil sama besar entah pengguna menyetel font browser-nya jadi sangat kecil atau sangat besar, artinya pengaturan pengguna sepenuhnya diabaikan.

Ada satuan absolut lain juga — pt (point), cm, in, mm — tapi semuanya ditujukan untuk stylesheet cetak, bukan layar. Di web, px adalah satu-satunya satuan absolut yang benar-benar bakal kamu pakai.

Pixel itu oke — sampai titik tertentu

Nggak ada yang salah dengan px untuk border, jarak kecil yang tetap, atau hal-hal yang memang sebaiknya nggak ikut membesar-mengecil. Jebakannya muncul saat kamu pakai px untuk ukuran font dan dimensi layout besar, karena ukurannya jadi terkunci dan mengabaikan pengaturan pengguna sekaligus ukuran layar. Untuk yang itu, kamu biasanya lebih butuh satuan relatif.

Relatif terhadap ukuran font: em dan rem

Dua satuan inilah yang bikin pembahasan jadi menarik. Keduanya terikat pada ukuran font, tapi pada ukuran font yang berbeda — dan tertukar di antara keduanya adalah salah satu kebingungan paling umum di CSS.

rem itu singkatan dari “root em”. Dia selalu relatif terhadap ukuran font root — yaitu ukuran font yang dipasang di elemen <html>, yang nilai bawaannya 16px di semua browser. Jadi 1rem itu 16px, 2rem itu 32px, 0.5rem itu 8px, di mana pun kamu memakainya:

html {
  font-size: 16px;   /* root — sekarang 1rem sama dengan 16px */
}

.title {
  font-size: 2rem;     /* 32px */
  margin-bottom: 1rem; /* 16px */
}

Sebaliknya, em itu relatif terhadap ukuran font elemen yang sedang dipakai (atau, untuk property seperti padding, ukuran font elemen itu sendiri). Itu membuatnya bertenaga tapi juga licin, karena nilainya berubah-ubah tergantung konteks:

.card {
  font-size: 20px;
  padding: 1em;    /* 20px — mengikuti ukuran font card-nya sendiri */
}

.card .label {
  font-size: 0.5em;  /* 10px — separuh dari 20px milik card */
}

Bagian yang merepotkan dari em adalah dia berlipat ketika bersarang. Kalau sebuah .menu punya 1.5em dan ada .menu lain di dalam .menu itu yang juga 1.5em, maka yang di dalam jadi 1.5 × 1.5 = 2.25em dari ukuran asli — ukurannya menggelinding membesar dengan cara yang sering bikin orang kaget. rem terbebas dari masalah ini karena dia selalu menunjuk balik ke root yang sama.

Kenapa rem lebih aman jadi pilihan default untuk font

Karena rem berpatokan pada ukuran font root, mengatur ukuran teks dengan rem berarti satu perubahan pada font html akan menskalakan seluruh situsmu secara proporsional. Lebih bagus lagi, dia menghormati pengaturan ukuran font di browser pengguna — orang yang menaikkan ukuran default-nya demi keterbacaan akan mendapat situs yang ikut membesar bersamanya. Itu keuntungan aksesibilitas yang nyata, dan itulah kenapa rem jadi satuan andalan untuk tipografi di CSS modern.

Persen: relatif terhadap induk

Persen itu relatif terhadap elemen induk, tapi dimensi induk mana yang dipakai tergantung property-nya. Untuk width, 100% berarti selebar penuh induk; untuk height, mengikuti tinggi induk; sementara untuk padding dan margin horizontal, perhitungannya juga mengacu ke lebar induk (keanehan kecil yang layak diingat).

.container {
  width: 600px;
}

.half {
  width: 50%;   /* 300px — separuh dari induk yang 600px */
}

Persen paling bersinar untuk lebar yang cair — sebuah kolom yang selalu separuh container-nya, atau sebuah card yang memenuhi barisnya apa pun ukuran layar. Dia adalah bahan dasar tata letak yang bisa melar dan menyusut, dan kamu bakal sering menemukannya berdampingan dengan Flexbox dan Grid. Kalau kamu sudah melewati desain responsif, kamu pasti sudah merasakan bagaimana persen bikin tata letak terasa lebih luwes.

Satuan viewport: vw dan vh

Satuan viewport itu relatif terhadap ukuran viewport browser — yaitu area tampil dari jendela itu sendiri, bukan elemen induk mana pun:

1vw = 1% dari lebar viewport
1vh = 1% dari tinggi viewport
vmin = 1% dari yang lebih kecil di antara keduanya
vmax = 1% dari yang lebih besar di antara keduanya

Jadi 100vw itu selebar penuh jendela, dan 50vh itu separuh tingginya. Beginilah cara kamu membuat hal seperti bagian hero yang selalu memenuhi seluruh layar:

.hero {
  width: 100vw;
  height: 100vh;   /* satu layar penuh, di layar mana pun */
}

Satuan viewport luar biasa untuk bagian yang melebar penuh dan untuk tipografi yang ikut membesar mengikuti layar. Tapi ada sisi tajamnya: karena dia sepenuhnya mengabaikan elemen induk, 100vw bisa sedikit lebih lebar dari area konten yang terlihat saat ada scrollbar vertikal, sehingga muncul scroll horizontal yang nggak diinginkan. Pakai dengan sadar dan terukur, jangan jadikan default untuk segala hal.

Perbandingan singkat

Ini gambaran satu keluarga satuan secara sekilas — masing-masing diukur terhadap apa:

Satuan	Relatif terhadap	Pemakaian umum
`px`	Tidak ada (tetap)	Border, jarak kecil yang tetap
`rem`	Ukuran font root (`html`)	Ukuran font, jarak yang konsisten
`em`	Ukuran font elemen saat ini	Jarak yang menyesuaikan teks lokal
`%`	Elemen induk	Lebar dan tinggi yang cair
`vw` / `vh`	Lebar / tinggi viewport	Bagian satu layar penuh, teks cair

Menggabungkannya: strategi default yang masuk akal

Kamu nggak perlu memusingkan ini berlebihan. Pendekatan sederhana dan bisa diandalkan sudah mencakup sebagian besar kasus:

html {
  font-size: 16px;  /* root — biasanya biarkan saja bawaan browser */
}

.card {
  font-size: 1rem;       /* teks ikut root + pengaturan pengguna */
  padding: 1.5rem;       /* jarak berpatokan pada root yang gampang ditebak */
  border: 1px solid #ddd;  /* border 1px yang tetap dan tajam */
  width: 100%;           /* cair — memenuhi apa pun wadahnya */
  max-width: 40rem;      /* tapi nggak pernah melebar berlebihan */
}

Satu blok itu sudah menunjukkan keseluruhan filosofinya: rem untuk teks dan jarak supaya tata letak menskala sebagai satu kesatuan dan menghormati pengguna, px untuk hal yang memang sebaiknya nggak bergerak (garis border setipis rambut), dan % supaya card-nya menyesuaikan diri dengan container-nya. Campuran semacam inilah yang bakal kamu tulis berulang kali.

Jangan mengukur semuanya pakai px karena terbiasa

Kesalahan pemula yang paling sering adalah meraih px untuk segala hal karena terasa konkret dan gampang dibayangkan. Memang jalan di layarmu, tapi diam-diam dia merusak aksesibilitas — teks nggak akan merespons pengaturan ukuran font pengguna, dan tata letak nggak akan menskala rapi saat diperbesar. Jadikan rem sebagai default untuk teks dan jarak, % serta satuan viewport untuk tata letak, dan simpan px buat detail kecil yang sifatnya tetap.

Penutup

Satuan adalah kosakata pengaturan ukuran di CSS, dan begitu kamu tahu tiap satuan itu relatif terhadap apa, memilih yang tepat berhenti jadi tebak-tebakan:

px itu tetap dan absolut — pas untuk border dan detail kecil, tapi berisiko untuk font dan dimensi layout besar.
rem relatif terhadap ukuran font root — default paling aman untuk tipografi dan jarak yang konsisten, sekaligus menghormati pengaturan pengguna.
em relatif terhadap ukuran font elemen saat ini, jadi dia berlipat saat bersarang — berguna tapi perlu kehati-hatian.
% relatif terhadap induk, sehingga jadi tulang punggung lebar yang cair dan fleksibel.
vw dan vh relatif terhadap viewport — mantap untuk bagian satu layar penuh dan teks yang ikut menskala layar.

Kalau kamu sudah terbiasa membedakan satuan absolut dan relatif, kamu bakal meraih satuan yang tepat secara naluri. Berikutnya kita akan mendalami property display — pengaturan yang menentukan, pada level paling mendasar, bagaimana sebuah elemen berperilaku dalam aliran halaman.