Memahami Satuan CSS: px, em, rem, vh, dan vw untuk Desain Responsif

Pixel Bukan Lagi Standar Emas

Saat pertama belajar CSS, wajar jika kita menggunakan satuan px (pixel) untuk mengatur ukuran font, padding, atau lebar kotak. Namun, di era di mana pengguna membuka website dari jam tangan pintar hingga TV layar lebar 4K, ukuran pixel yang kaku tidak lagi relevan dan bisa merusak aksesibilitas (a11y).

1. px (Pixel) - Satuan Statis

Pixel adalah satuan absolut. Jika kamu mengatur font-size: 16px, teks itu akan selalu berukuran 16 pixel, tidak peduli apakah pengguna mencoba memperbesar teks dari pengaturan browser mereka. Kapan digunakan? Gunakan hanya untuk batas tipis seperti border: 1px solid black atau bayangan (box-shadow).

2. rem (Root EM) - Satuan Terbaik untuk Typography

rem adalah satuan yang mengacu pada ukuran font default dari tag akar (). Di sebagian besar browser, 1 rem sama dengan 16px.

• Jika kamu menulis margin: 2rem, itu sama dengan 32px.
• Kelebihan utama: Jika pengguna tunanetra memperbesar pengaturan font di HP mereka menjadi 24px, maka 1 rem milikmu akan otomatis menyesuaikan diri menjadi 24px. Websitemu tidak akan berantakan! Ini adalah best practice industri saat ini untuk teks, margin, dan padding.

3. em - Satuan yang Mengikuti Induknya

Mirip dengan rem, tapi em mengacu pada ukuran font dari elemen Induknya langsung (Parent), bukan tag root.

• Jika sebuah kotak induk memiliki font-size: 20px, dan di dalamnya ada tombol dengan padding: 1em, maka padding tombol itu adalah 20px.
• Peringatan: Penggunaan em bersarang (nested) sering menyebabkan ukuran membesar tanpa kendali (Snowball effect). Gunakan dengan sangat hati-hati, misalnya khusus untuk ukuran ikon di sebelah teks.

4. vh dan vw (Viewport Height & Width)

Satuan ini 100% bergantung pada ukuran layar perangkat (Viewport) pengunjung.

• 100vw berarti 100% dari lebar layar pengguna.
• 100vh berarti 100% dari tinggi layar pengguna.
• Kapan digunakan? Sangat cocok untuk membuat halaman Hero Banner atau Landing Page yang elemen utamanya harus memenuhi layar penuh dari ujung ke ujung tanpa perlu repot menghitung resolusi monitor.