Jangan Bingung Lagi! Ini Beda Jelas Unit Px dan Vh Untuk Desain Web

Table of Contents

Hei, developer atau kamu yang lagi belajar bikin web! Pernah nggak sih bingung pas nentuin ukuran elemen di website pakai satuan apa? Ada px, ada %, ada em, rem, terus ada juga vh dan vw. Nah, kali ini kita bakal bedah tuntas soal dua satuan yang sering bikin penasaran: px dan vh. Apa bedanya dan kapan harus pakai yang mana? Yuk, kita kupas satu per satu!

Mengenal px (Pixel): Satuan yang Paling Akrab¶

px itu singkatan dari pixel. Ini adalah satuan ukuran yang paling sering kita temuin di dunia desain grafis maupun web. Secara historis, 1 pixel itu dianggap setara dengan satu titik terkecil yang bisa ditampilin di layar monitor. Makanya, px ini disebut sebagai satuan absolut.

Kenapa dibilang absolut? Soalnya, ukurannya itu tetap dan nggak berubah-ubah meskipun ukuran layar penggunanya beda. Kalau kamu set ukuran font jadi 16px, di layar laptop 14 inci ukurannya akan segitu, di layar monitor 24 inci ya segitu juga, bahkan di smartphone mungil ukurannya juga bakal relatif sama (dalam konteks jumlah pixel-nya, bukan seberapa besar kelihatannya secara fisik).

Kelebihan px¶

Salah satu kelebihan utama pakai px adalah konsistensi. Kamu bisa memastikan sebuah elemen akan punya ukuran yang sama persis (dalam satuan pixel) di mana pun dilihat. Ini bikin kontrol layout jadi lebih presisi, terutama untuk elemen-elemen kecil atau border yang butuh ketelitian tinggi.

Selain itu, px ini satuan yang paling gampang dipahami buat pemula. Mau bikin kotak 100x100 pixel? Ya tinggal set width: 100px; dan height: 100px;. Simpel kan?

Image just for illustration

Kekurangan px¶

Tapi, dibalik kesederhanaannya, px punya kelemahan serius di era responsive design kayak sekarang. Karena ukurannya absolut, elemen yang diukur pakai px nggak akan ikut menyesuaikan diri secara otomatis saat ukuran layar berubah drastis.

Bayangin kalau kamu set ukuran font jadi 20px. Di desktop mungkin kelihatan pas, tapi pas dibuka di smartphone dengan layar sempit, teksnya bisa jadi terlalu besar dan makan banyak tempat, atau bahkan kepotong! Begitu juga dengan elemen lain seperti gambar atau div. Ini bikin website kamu jadi kurang fleksif dan nggak ramah di berbagai ukuran layar.

Fakta Menarik: Dulu, 1px di CSS memang hampir selalu setara dengan 1 pixel fisik di layar. Tapi seiring perkembangan teknologi layar (Retina Display, dll.) yang punya pixel density tinggi, browser modern memperkenalkan konsep Device Independent Pixel (DIP) atau CSS Pixel. Jadi, 1px di CSS bisa jadi bukan 1 pixel fisik lagi, tapi merupakan unit yang sudah disesuaikan browser agar elemen terlihat punya ukuran visual yang konsisten di berbagai layar dengan pixel density berbeda.

Mengenal vh (Viewport Height): Satuan yang Dinamis¶

Nah, kalau vh itu beda cerita. vh singkatan dari viewport height. Ini termasuk dalam kategori satuan relatif. Relatif terhadap apa? Relatif terhadap ukuran viewport.

Apa itu viewport? Viewport adalah area jendela browser tempat konten website kamu ditampilkan. Jadi, kalau kamu buka website di laptop, viewport-nya ya ukuran jendela browser kamu. Kalau buka di smartphone, viewport-nya ya ukuran layar smartphone kamu (dikurangi area address bar, navigation bar, dll. tergantung browser-nya).

Nah, 1 vh itu setara dengan 1% dari tinggi viewport. Jadi, kalau tinggi viewport-nya 800 pixel, maka 1 vh = 8 pixel. Kalau tinggi viewport-nya 1000 pixel, maka 1 vh = 10 pixel. Gampang kan ngitungnya?

Yang paling sering dipakai adalah 100vh. Ini artinya tinggi elemennya akan diset setara dengan 100% tinggi viewport. Ini sering banget dipakai buat bikin seksi “hero” atau landing section yang tingginya pas banget satu layar pas pertama kali website dibuka.

Image just for illustration

Kelebihan vh¶

Kelebihan utama vh ada pada sifatnya yang relatif terhadap viewport. Ini bikin elemen yang pakai vh jadi fleksibel dan otomatis menyesuaikan ukurannya saat ukuran jendela browser berubah.

Ini sangat penting buat responsive design. Kamu bisa bikin elemen yang tingginya selalu proporsional dengan tinggi layar pengguna, berapapun ukuran layarnya. Mau layar tinggi dan ramping, atau pendek dan lebar, elemen dengan satuan vh akan tetap “pas” secara vertikal sesuai persentase viewport yang kamu tentukan.

Misalnya, kamu punya sebuah div yang mau tingginya selalu mengisi 50% tinggi layar. Tinggal set height: 50vh;. Beres! Nggak peduli user buka di monitor gede atau tablet, tinggi div itu akan selalu setengah dari tinggi layar mereka. Keren, kan?

Kekurangan vh¶

Meskipun fleksibel, vh juga punya kekurangan. Karena ukurannya selalu berdasarkan tinggi viewport, ada kalanya ini bisa jadi nggak terduga, terutama di perangkat mobile. Beberapa browser mobile suka “menyembunyikan” atau “menampilkan” address bar atau navigation bar mereka saat user scroll. Perubahan ini bisa memengaruhi ukuran viewport yang dilaporkan ke CSS, sehingga elemen yang pakai vh bisa tiba-tiba berubah ukurannya sedikit. Ini kadang bikin layout jadi agak “meloncat” atau nggak stabil.

Selain itu, kalau kamu pakai vh untuk ukuran font atau elemen di dalam kontainer yang scrollable, hasilnya mungkin nggak seperti yang diharapkan. Satuan vh ini paling powerful saat dipakai untuk mengukur elemen top-level atau elemen yang tingginya memang ditujukan untuk menyesuaikan dengan tinggi keseluruhan layar.

Fakta Menarik: Selain vh, ada juga vw (viewport width), vmin (viewport minimum dimension), dan vmax (viewport maximum dimension). vw persis sama cara kerjanya dengan vh, tapi relatif terhadap lebar viewport. vmin relatif terhadap dimensi terkecil antara lebar atau tinggi viewport, sedangkan vmax relatif terhadap dimensi terbesar. Mereka semua termasuk dalam keluarga satuan viewport units dan sama-sama penting untuk responsive design.

Perbedaan Mendasar: Absolut vs. Relatif¶

Inti dari perbedaan antara px dan vh adalah sifatnya:

• px: Satuan absolut. Ukurannya tetap berdasarkan jumlah pixel (CSS pixel) dan tidak berubah meskipun ukuran layar berubah. Mirip penggaris fisik.
• vh: Satuan relatif. Ukurannya berubah secara proporsional berdasarkan persentase dari tinggi viewport pengguna. Mirip karet yang bisa melar atau menyusut.

Tabel Perbandingan Singkat¶

Biar makin jelas, lihat tabel perbandingan ini:

Fitur	px (Pixel)	vh (Viewport Height)
Tipe Satuan	Absolut	Relatif
Basis Ukur	CSS Pixel (relatif tetap)	1% dari tinggi Viewport
Responsif	Kurang ideal, tidak menyesuaikan	Sangat responsif terhadap tinggi layar
Konsistensi	Sangat konsisten (dalam px)	Konsisten secara proporsional
Presisi	Tinggi untuk ukuran tetap	Kurang presisi untuk ukuran kecil tetap
Penggunaan Umum	Font (kadang), border, padding, margin elemen kecil, ukuran elemen tetap	Tinggi elemen full-screen, layout yang menyesuaikan tinggi layar

Image just for illustration

Kapan Pakai px dan Kapan Pakai vh?¶

Memilih antara px dan vh (atau satuan lainnya) itu sebenarnya tergantung pada tujuanmu. Nggak ada yang 100% benar atau salah, yang ada adalah yang paling pas untuk kasus tertentu.

Gunakan px ketika:

1. Kamu butuh ukuran yang pasti dan tidak berubah. Contohnya, ketebalan border (border: 1px solid black;) atau gap antar item di Grid/Flexbox yang kamu ingin ukurannya konsisten berapapun ukuran layarnya.
2. Kamu mengatur padding atau margin untuk elemen-elemen kecil di mana perubahan ukuran berdasarkan layar mungkin nggak signifikan atau justru bikin aneh.
3. Kamu mendesain untuk output yang fix, seperti layout untuk dicetak, meskipun kasus ini jarang di web modern.
4. Untuk ukuran font pada kasus tertentu. Meskipun disarankan pakai rem atau em untuk ukuran font agar lebih aksesibel dan responsif, px masih bisa dipakai kalau kamu memang menginginkan ukuran font yang benar-benar fix dan tidak terpengaruh zoom browser (kecuali zoom halaman secara keseluruhan).

Gunakan vh ketika:

1. Kamu ingin elemen memiliki tinggi yang selalu proporsional dengan tinggi layar pengguna. Kasus paling umum adalah membuat bagian “Hero Section” yang tingginya pas 100% tinggi layar (height: 100vh;).
2. Kamu ingin membuat elemen yang tingginya mengisi sisa ruang vertikal yang tersedia (sering dikombinasikan dengan Flexbox atau Grid).
3. Kamu membuat layout yang benar-benar ingin stick dengan tinggi viewport, seperti full-screen modal atau overlay.
4. Untuk ukuran font atau elemen dalam kasus spesifik di mana kamu ingin skalanya mengikuti tinggi layar (meskipun ini lebih jarang daripada pakai vw atau satuan relatif lainnya untuk font).

Tips: Seringkali kombinasi dari berbagai satuan adalah solusi terbaik. Kamu bisa pakai vh untuk tinggi kontainer utama, tapi pakai px untuk border di dalamnya, dan pakai rem untuk ukuran font. Ini bikin layout kamu kuat, responsif, tapi tetap punya detail yang presisi.

Implementasi di Dunia Nyata¶

Mari kita lihat beberapa contoh penggunaan px dan vh di kode CSS:

Contoh Penggunaan px¶

.button {
  padding: 10px 20px; /* Padding 10px atas/bawah, 20px kiri/kanan */
  border: 2px solid blue; /* Border tebal 2px */
  font-size: 16px; /* Ukuran font 16px */
  margin-bottom: 15px; /* Margin bawah 15px */
}

.thumbnail {
  width: 150px; /* Lebar tetap 150px */
  height: 100px; /* Tinggi tetap 100px */
  border-radius: 5px; /* Sudut border melengkung 5px */
}

Pada contoh di atas, semua ukuran (padding, border, font-size, margin, width, height, border-radius) diatur menggunakan px. Ukuran-ukuran ini akan sama jumlah pixel-nya di berbagai ukuran layar. Tombol atau thumbnail akan terlihat semakin kecil secara proporsional terhadap ukuran layar yang membesar, atau semakin besar terhadap layar yang mengecil.

Contoh Penggunaan vh¶

.hero-section {
  height: 100vh; /* Tinggi selalu mengisi 100% tinggi viewport */
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.half-screen-div {
  height: 50vh; /* Tinggi selalu mengisi 50% tinggi viewport */
  background-color: lightblue;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* Sering dipakai bersama vh untuk fullscreen overlay */
  height: 100vh; /* Tinggi selalu mengisi 100% tinggi viewport */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

Di sini, .hero-section akan selalu punya tinggi yang pas satu layar. .half-screen-div akan selalu setengah tinggi layar, dan .modal-overlay akan benar-benar menutupi seluruh area viewport (baik lebar maupun tinggi) dengan latar belakang transparan.

Potensi Masalah dengan vh di Mobile¶

Seperti yang sedikit disinggung tadi, salah satu isu paling umum saat menggunakan vh adalah perilaku address bar dan toolbar di browser mobile. Di banyak browser mobile, elemen UI ini akan muncul saat kamu scroll ke atas dan menghilang saat scroll ke bawah.

Saat elemen-elemen UI browser ini muncul atau hilang, tinggi viewport yang dilaporkan ke CSS bisa berubah. Akibatnya, elemen yang tingginya 100vh mungkin tidak benar-benar mengisi seluruh layar saat address bar terlihat. Tingginya bisa jadi sedikit lebih pendek dari layar fisik karena 100vh dihitung dari viewport yang lebih kecil (viewport dikurangi tinggi address bar). Saat kamu scroll ke bawah dan address bar menghilang, viewport membesar, dan elemen 100vh kamu akan ikut membesar, yang bisa menyebabkan sedikit pergeseran layout.

Ini adalah bug yang sudah dikenal luas dan pengembang browser masih berusaha mencari solusi standar. Beberapa workaround yang bisa dipakai antara lain:
* Menggunakan JavaScript untuk mendapatkan tinggi layar yang sebenarnya dan menerapkannya sebagai variabel CSS atau gaya inline.
* Menggunakan calc() untuk mengkombinasikan vh dengan satuan lain, meskipun ini tidak selalu mengatasi masalah dynamic toolbar.
* Menerima sedikit pergeseran tersebut karena bagi sebagian besar pengguna, pergeseran ini mungkin tidak terlalu mengganggu.

Memadukan px dan vh untuk Hasil Optimal¶

Desain web modern yang responsif jarang hanya mengandalkan satu jenis satuan saja. Kombinasi unit absolut (px) dan unit relatif (vh, vw, %, em, rem) adalah kunci untuk membangun layout yang kuat dan fleksibel.

Misalnya, kamu bisa set ukuran padding dan border pakai px karena kamu mau konsistensi detail, tapi set lebar atau tinggi elemen utama pakai %, vw, atau vh supaya responsif terhadap ukuran layar. Ukuran font biasanya paling baik pakai rem untuk aksesibilitas dan skalabilitas yang baik, tapi kalau ada elemen spesifik yang ukuran fontnya harus tetap (jarang terjadi), px bisa jadi pilihan.

Contoh kombinasi:

.container {
  width: 90%; /* Lebar 90% dari parent container */
  max-width: 1200px; /* Tapi nggak lebih dari 1200px */
  margin: 0 auto; /* Rata tengah */
  padding: 20px; /* Padding 20px di semua sisi */
  min-height: 70vh; /* Tinggi minimal 70% tinggi viewport */
  border: 1px solid #ccc; /* Border 1px */
}

Dalam contoh ini, kita menggunakan % untuk lebar (relatif terhadap parent), px untuk max-width (memberikan batasan absolut), px untuk padding dan border (untuk konsistensi detail), dan vh untuk min-height (memastikan kontainer punya tinggi minimal yang proporsional dengan layar). Ini adalah contoh nyata bagaimana berbagai satuan bekerja sama dalam satu elemen CSS.

Kesimpulan Singkat¶

Jadi, intinya:

• px itu satuan absolut, cocok buat elemen yang ukurannya kamu ingin fix dan nggak berubah, memberikan kontrol yang presisi pada detail kecil.
• vh itu satuan relatif terhadap tinggi viewport, cocok buat elemen yang ukurannya kamu ingin fleksibel dan menyesuaikan dengan tinggi layar pengguna, sangat berguna untuk responsive design terutama untuk elemen yang ingin mengisi sebagian atau seluruh tinggi layar.

Memahami perbedaan dan kapan menggunakan masing-masing satuan ini akan sangat membantu kamu dalam membuat layout web yang bukan cuma kelihatan bagus, tapi juga responsif dan berfungsi dengan baik di berbagai perangkat dan ukuran layar.

Gimana, sekarang udah nggak bingung lagi kan bedanya px sama vh?

Punya pengalaman menarik atau tips lain soal penggunaan satuan ini? Atau mungkin masih ada yang bikin kamu penasaran? Jangan ragu buat share di kolom komentar di bawah ya! Kita diskusi bareng!