VH atau PX? Pahami Bedanya Biar Desainmu Makin Responsif

Table of Contents

Dalam dunia web development, khususnya saat ngoding CSS, kita sering banget berhadapan sama yang namanya unit pengukuran. Ini penting banget buat ngasih tahu browser seberapa besar atau seberapa jauh sebuah elemen itu. Nah, dari sekian banyak unit, px dan vh ini termasuk yang sering dipakai, tapi fungsinya beda banget. Biar nggak bingung, yuk kita bedah satu per satu.

Image just for illustration

Mungkin Anda udah akrab banget sama px (pixel). Ini unit yang paling tua dan mungkin paling sering pertama kali dipelajari. Sementara itu, ada juga vh (viewport height), yang relatif lebih modern dan jagoannya responsif. Memilih unit yang tepat itu krusial lho buat memastikan website Anda kelihatan bagus dan berfungsi optimal di berbagai ukuran layar.

Pixel (px): Si Satuan Tetap yang Presisi¶

Oke, kita mulai dari yang paling basic, yaitu px. Apa sih px itu? Secara harfiah, px ini merujuk pada satu titik (pixel) di layar. Dulu banget, satu unit px itu bener-bener sama dengan satu titik fisik di monitor. Tapi seiring perkembangan teknologi layar (monitor dengan DPI/PPI tinggi), definisinya sedikit bergeser. Di CSS, px sekarang lebih sering disebut sebagai absolute unit atau unit mutlak, meskipun sebenarnya definisinya lebih ke “reference pixel” yang relatif konsisten secara visual di berbagai device dengan DPI berbeda. Intinya, px itu nilainya tetap, nggak berubah-ubah meskipun ukuran layar berubah.

Image just for illustration

Misalnya, kalau Anda ngasih style width: 200px; ke sebuah elemen div, maka lebar div itu akan selalu 200 pixel, mau dibuka di layar laptop, tablet, atau smartphone (dengan asumsi zoom level normal). Nilai 200 pixel ini nggak akan menyesuaikan diri secara otomatis kalau lebar layar berubah. Ini bikin px gampang diprediksi dan ngasih kontrol yang sangat presisi buat desainer.

Kelebihan Menggunakan px¶

• Prediktabilitas: Anda tahu pasti berapa besar atau jauh elemen itu dalam satuan pixel. Ini bikin debugging atau penyesuaian layout jadi lebih mudah karena nilainya fix.
• Kontrol Detil: Cocok banget buat elemen-elemen kecil yang butuh ukuran persis, misalnya ukuran ikon, ketebalan border, atau jarak antar elemen yang nggak perlu berubah secara proporsional.
• Kompatibilitas Luas: Karena sudah ada dari zaman baheula, semua browser pasti mendukung unit px tanpa masalah.

Kekurangan Menggunakan px¶

• Tidak Responsif: Ini kelemahan utamanya. Karena ukurannya fix, layout yang didominasi unit px akan kaku dan nggak bisa menyesuaikan diri dengan baik di layar yang ukurannya beda-beda. Bisa-bisa elemennya kepotong atau terlalu besar/kecil di layar tertentu.
• Masalah Aksesibilitas: Ini penting! Pengguna dengan gangguan penglihatan sering mengatur ukuran font di browser mereka. Jika Anda mengatur ukuran teks menggunakan px (misalnya font-size: 16px;), ukuran teks itu nggak akan berubah meskipun user udah setting ukuran font default browser mereka lebih besar. Ini menghambat aksesibilitas.

Kapan Sebaiknya Pakai px?¶

Meskipun punya kelemahan soal responsif dan aksesibilitas, px tetap punya tempatnya. Unit ini bagus untuk:

• Ukuran border: border: 1px solid black;
• Detail-detail kecil yang ukurannya harus konsisten terlepas dari ukuran layar: width: 24px; height: 24px; untuk ikon.
• Gap antar item di Flexbox atau Grid: gap: 10px; (meskipun unit relatif juga bisa).
• Kasus-kasus spesifik di mana Anda memang membutuhkan ukuran yang persis sama di mana pun.

Secara umum, hindari pakai px untuk font-size dan juga untuk ukuran atau jarak elemen-elemen besar yang merupakan bagian dari layout utama yang butuh responsif.

/* Contoh penggunaan px */
.container {
  width: 960px; /* Akan selalu 960px, tidak responsif */
  margin: 0 auto;
  border: 1px solid #ccc; /* Border akan selalu 1px */
}

.icon {
  width: 32px; /* Ukuran ikon tetap 32px */
  height: 32px;
}

.text-small {
  font-size: 12px; /* Hindari ini untuk teks utama */
}

Viewport Height (vh): Dinamis Mengikuti Tinggi Layar¶

Nah, sekarang kita beralih ke vh. Berbeda 180 derajat dari px, vh adalah relative unit. Relatif terhadap apa? Terhadap tinggi viewport. Viewport itu adalah area jendela browser tempat konten web Anda ditampilkan.

Image just for illustration

Satu unit vh (1vh) itu sama dengan 1% dari tinggi viewport. Jadi, kalau tinggi viewport Anda adalah 800 pixel, maka 1vh = 8 pixel. Kalau tinggi viewport-nya 1000 pixel, maka 1vh = 10 pixel. Gampang kan?

Ini bikin elemen yang ukurannya pakai vh akan otomatis menyesuaikan diri ketika ukuran jendela browser (tinggi viewport) berubah. Kalau viewport diperkecil tingginya, elemennya juga ikut mengecil secara proporsional. Kalau viewport diperbesar, elemennya ikut membesar.

Contoh paling sering pakai vh adalah untuk membuat bagian yang tingginya mengisi penuh layar (sering disebut hero section atau full-screen section). Anda tinggal beri style height: 100vh;, maka tinggi elemen itu akan selalu sama dengan tinggi viewport saat itu, berapa pun tinggi viewport-nya.

Kelebihan Menggunakan vh¶

• Sangat Responsif Vertikal: Ini keunggulan terbesarnya. Sangat ideal untuk layout yang butuh elemen dengan tinggi yang proporsional terhadap tinggi layar pengguna.
• Membuat Bagian Full-Screen dengan Mudah: Seperti contoh height: 100vh;, ini cara paling sederhana untuk membuat sebuah blok konten mengisi penuh tinggi layar.
• Memudahkan Vertical Centering: Bersama dengan unit viewport lainnya (vw, vmin, vmax) dan teknik CSS modern seperti Flexbox atau Grid, vh bisa mempermudah pemosisian elemen secara vertikal.

Kekurangan Menggunakan vh¶

• Sensitif terhadap Perubahan Tinggi Viewport: Meskipun ini kelebihannya, ini juga bisa jadi kekurangan dalam beberapa skenario. Misalnya, di browser mobile, ketika virtual keyboard muncul atau toolbar browser muncul/sembunyi, tinggi viewport bisa berubah secara tiba-tiba. Ini bisa bikin elemen 100vh jadi sedikit aneh ukurannya (terlalu pendek atau terlalu tinggi dari yang diinginkan).
• Tidak Terkait dengan Ukuran Font: Sama seperti px, vh ini relatif terhadap viewport, bukan ukuran font. Jadi, kalau Anda pakai vh untuk ukuran padding atau margin di sekitar teks, jaraknya akan tetap proporsional terhadap layar, tapi nggak akan ikut membesar kalau user memperbesar ukuran font default browser mereka (tidak se-aksesibel em atau rem untuk konteks ini).

Kapan Sebaiknya Pakai vh?¶

vh paling bersinar saat Anda perlu membuat elemen yang ukurannya terkait langsung dengan tinggi layar yang tersedia:

• Hero section atau banner yang tingginya harus mengisi penuh layar saat pertama kali dimuat: height: 100vh;
• Elemen yang tingginya perlu proporsional terhadap tinggi layar: height: 50vh; (setengah tinggi layar).
• Dalam beberapa kasus fluid typography, Anda bisa menggunakan kombinasi vw dan vh (atau vmin/vmax) meskipun ini topik yang lebih lanjut.

/* Contoh penggunaan vh */
.hero-section {
  height: 100vh; /* Mengisi penuh tinggi viewport */
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.half-screen-block {
  height: 50vh; /* Setengah tinggi viewport */
  background-color: #e9e9e9;
}

Inti Perbedaan: Tetap vs. Relatif¶

Oke, setelah lihat penjelasan masing-masing, perbedaannya udah makin jelas ya. Intinya, px itu tetap (relatif terhadap reference pixel yang stabil), sementara vh itu relatif terhadap tinggi viewport.

Mari kita simpulkan perbedaan utamanya dalam bentuk tabel biar lebih gampang dicerna:

Fitur	Pixel (px)	Viewport Height (vh)	Penjelasan Singkat
Tipe Unit	Absolute (Fixed relative to reference pixel)	Relative (Relative to viewport)	px nilainya ‘pasti’, vh nilainya ‘persentase’ dari tinggi layar.
Responsivitas	Rendah	Tinggi	px nggak berubah dengan ukuran layar, vh berubah mengikuti tinggi layar.
Skalabilitas	Tidak Skalabel	Skalabel (Vertikal)	Ukuran px tetap, ukuran vh membesar/mengecil seiring tinggi layar.
Basis Pengukuran	Reference Pixel (Kurang lebih seperti titik fisik di layar)	Tinggi Viewport (Jendela browser yang terlihat)	Dari mana nilainya dihitung.
Prediktabilitas	Tinggi (nilainya selalu sama)	Berubah (tergantung tinggi viewport)	Gampang nebak ukuran finalnya (px), harus lihat tinggi layarnya (vh).
Penggunaan Ideal	Detail kecil, batas, ukuran fixed	Bagian fullscreen, tinggi elemen dinamis, layout vertikal responsif.	Untuk apa unit ini paling cocok digunakan.
Aksesibilitas (terkait ukuran font)	Buruk (ukuran teks fix)	Netral (tidak terkait ukuran font)	px untuk teks menghambat perubahan font user, vh tidak terkait font.

Tabel ini jelas menunjukkan bahwa kedua unit ini dirancang untuk tujuan yang berbeda. px untuk kontrol yang presisi pada detail-detail kecil, sementara vh untuk menciptakan layout yang dinamis dan responsif berdasarkan tinggi layar.

Memilih Unit yang Tepat untuk Skenario yang Berbeda¶

Dalam prakteknya, Anda jarang banget cuma pakai px atau cuma pakai vh sendirian untuk seluruh website. Desain web modern itu butuh kombinasi unit.

Kapan Fokus ke px?¶

Gunakan px saat Anda:

• Menentukan ketebalan garis border: border: 2px solid red;
• Mengatur ukuran ikon kecil yang memang harus punya ukuran fisik yang konsisten: width: 16px; height: 16px;
• Menentukan minimum atau maximum size untuk elemen tertentu, misalnya min-width: 300px; untuk mencegah elemen jadi terlalu kecil (meskipun ini juga bisa pakai vw atau unit lain).
• Jarak antar elemen (margin/padding) pada komponen yang ukurannya relatif fixed atau tidak terkait langsung dengan ukuran font.

Kapan Fokus ke vh?¶

Gunakan vh saat Anda:

• Ingin membuat sebuah bagian (section) di website Anda tingginya sama persis dengan tinggi layar saat itu: height: 100vh;
• Membuat elemen yang tingginya harus proporsional terhadap tinggi layar, misalnya sebuah sidebar yang tingginya 80% dari tinggi layar: height: 80vh;
• Mencoba teknik vertical centering atau layout yang memanfaatkan ruang vertikal layar secara penuh.

Kombinasi Unit: Kekuatan Sesungguhnya¶

Strategi terbaik biasanya adalah menggabungkan unit-unit yang berbeda, termasuk px, vh, vw, em, dan rem.

• Gunakan rem (relative to root element’s font-size) untuk ukuran teks dan jarak (padding/margin) di sekitar teks. Ini unit terbaik untuk aksesibilitas teks.
• Gunakan vh dan vw (viewport width) untuk dimensi elemen-elemen layout utama yang perlu responsif terhadap ukuran layar.
• Gunakan % (percentage) untuk elemen yang ukurannya relatif terhadap parent elementnya.
• Gunakan px untuk detail-detail kecil yang memang butuh ukuran fix dan presisi.

Contoh kombinasi:

.page-wrapper {
  padding: 2rem; /* Padding relatif terhadap font size root */
}

.hero-section {
  height: 80vh; /* Tinggi 80% dari tinggi viewport */
  padding: 40px; /* Padding fix 40px */
  margin-bottom: 2rem; /* Margin bawah relatif terhadap font size root */
}

.icon-button {
  width: 48px; /* Ukuran tombol ikon fix */
  height: 48px;
  border: 1px solid black; /* Border fix 1px */
}

.content-block {
  margin-top: 1.5rem; /* Margin atas relatif ke font size root */
  font-size: 1rem; /* Ukuran font relatif ke root font size */
  line-height: 1.5;
}

Dengan mengombinasikan unit-unit ini, Anda bisa membuat website yang responsif, mudah diakses, dan tetap punya kontrol yang presisi di area yang membutuhkannya.

Tips Pro: Mengoptimalkan Penggunaan vh dan px¶

1. Selalu Uji Responsivitas: Desain Anda mungkin terlihat bagus di layar desktop Anda, tapi bagaimana di tablet dalam mode potret atau smartphone dalam mode landscape? Selalu uji layout Anda di berbagai ukuran viewport (bisa pakai fitur developer tools di browser).
2. Perhatikan Masalah Mobile Viewport: Seperti yang disebut sebelumnya, 100vh di mobile kadang bisa trick karena toolbar browser yang muncul/sembunyi. Ada beberapa solusi untuk ini, seperti menggunakan JavaScript untuk menghitung tinggi viewport yang “sebenarnya” (tanpa toolbar) atau menggunakan trik CSS seperti height: -webkit-fill-available; (meskipun ini non-standar dan butuh prefix) atau menggabungkan dengan Flexbox/Grid dan height: 100%; di elemen parentnya. Untuk kasus sederhana, 100vh tetap cara tercepat, tapi sadari potensi masalahnya.
3. Prioritaskan Aksesibilitas untuk Teks: Ini nggak ada hubungannya langsung sama vh, tapi sangat penting kalau bicara unit. Jangan pakai px untuk font-size. Gunakan rem atau em agar pengguna bisa memperbesar/memperkecil ukuran teks sesuai kebutuhan mereka.
4. Pahami Konteks: Setiap unit punya tujuannya sendiri. Sebelum menentukan mau pakai unit apa, pikirkan: Apakah ukuran elemen ini harus tetap sekian pixel? Atau harus proporsional terhadap layar? Atau harus proporsional terhadap ukuran teks? Jawaban dari pertanyaan ini akan menuntun Anda memilih unit yang tepat.

Fakta Menarik Lainnya Seputar Unit CSS¶

Selain px dan vh, CSS punya banyak unit lain yang nggak kalah menarik dan berguna:

• em: Relatif terhadap ukuran font elemen itu sendiri (atau parentnya kalau elemen itu tidak punya font-size). Berguna untuk jarak (padding/margin) yang terkait erat dengan ukuran teks di dalamnya.
• rem: Relatif terhadap ukuran font elemen root (<html>). Ini unit relative yang paling direkomendasikan untuk ukuran teks dan spasi terkait teks karena lebih mudah diprediksi daripada em (tidak terpengaruh oleh ukuran font elemen parent).
• vw: Viewport Width. Sama seperti vh, tapi relatif terhadap lebar viewport. 1vw = 1% lebar viewport. Cocok untuk elemen yang lebarnya perlu proporsional dengan lebar layar atau untuk teknik fluid typography (font-size: calc(1rem + 1vw);).
• vmin: Viewport Minimum. Relatif terhadap nilai minimum antara vh dan vw. Jadi, kalau viewport lebih tinggi dari lebarnya, 1vmin = 1vw. Kalau lebih lebar dari tingginya, 1vmin = 1vh. Berguna untuk memastikan elemen selalu muat di layar, baik potret maupun landscape.
• vmax: Viewport Maximum. Kebalikan dari vmin, relatif terhadap nilai maksimum antara vh dan vw. Berguna untuk memastikan elemen selalu mengisi sebagian besar layar, baik potret maupun landscape.
• %: Percentage. Relatif terhadap ukuran elemen parent-nya. Ini salah satu unit relative yang sudah lama ada.

Semakin Anda paham berbagai unit ini dan kapan menggunakannya, semakin fleksibel dan efisien kode CSS Anda, dan hasilnya, website Anda akan lebih adaptif dan mudah diakses.

Contoh Praktis: Membuat Hero Section Penuh Layar¶

Mari kita lihat contoh sederhana penggunaan vh untuk membuat bagian pertama (hero section) dari sebuah halaman web yang tingginya selalu mengisi penuh layar saat halaman dimuat.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh vh vs px</title>
  <style>
    body {
      margin: 0; /* Hilangkan margin default body */
      font-family: sans-serif;
    }

    .hero-section {
      height: 100vh; /* Kunci utamanya: tinggi sama dengan tinggi viewport */
      background-color: #a0d2eb; /* Warna latar belakang */
      color: #333; /* Warna teks */
      display: flex; /* Untuk menengahkan konten di dalamnya */
      flex-direction: column;
      justify-content: center; /* Tengahkan vertikal */
      align-items: center; /* Tengahkan horizontal */
      text-align: center;
      padding: 20px; /* Padding menggunakan px untuk jarak dalam fix */
    }

    .hero-section h1 {
      font-size: 3rem; /* Ukuran judul pakai rem biar aksesibel */
      margin-bottom: 0.5rem;
    }

    .hero-section p {
      font-size: 1.2rem; /* Ukuran paragraf pakai rem */
    }

    .content-below {
      height: 500px; /* Contoh bagian lain dengan tinggi fix (atau bisa pakai unit lain) */
      background-color: #e5eaf5;
      padding: 20px;
    }
  </style>
</head>
<body>

  <div class="hero-section">
    <h1>Selamat Datang!</h1>
    <p>Ini adalah hero section yang tingginya 100% viewport.</p>
  </div>

  <div class="content-below">
    <h2>Konten Lain</h2>
    <p>Bagian ini berada di bawah hero section. Anda bisa scroll untuk melihatnya.</p>
  </div>

</body>
</html>

Di contoh ini, kelas .hero-section menggunakan height: 100vh;. Ini memastikan bahwa ketika halaman pertama kali dimuat, elemen ini akan mengambil seluruh tinggi layar yang tersedia, memberikan efek ‘full-screen’. Di sisi lain, .content-below menggunakan height: 500px;, yang berarti tingginya akan selalu 500 pixel, tidak peduli seberapa tinggi layar Anda. Padding di kedua bagian menggunakan px karena tujuannya adalah memberikan ruang di dalam elemen yang ukurannya fix terlepas dari ukuran font atau layar. Sedangkan ukuran font menggunakan rem agar responsif terhadap setting font user. Ini menunjukkan bagaimana px, vh, dan rem bisa bekerja sama dalam satu halaman.

Mengatasi Tantangan Umum: Mobile Viewport dan Aksesibilitas¶

Seperti yang sempat disinggung, tantangan paling umum dengan vh di mobile adalah masalah toolbar browser yang muncul/sembunyi. Ini bisa menyebabkan jumpiness atau ukuran yang tidak konsisten pada elemen yang menggunakan 100vh. Solusi ideal untuk ini masih menjadi perdebatan dan seringkali melibatkan sedikit JavaScript untuk menghitung tinggi viewport yang ‘stabil’. Namun, untuk banyak kasus, efek jumpiness-nya mungkin tidak terlalu mengganggu, jadi penting untuk menimbang apakah perlu solusi yang lebih kompleks.

Untuk masalah aksesibilitas, penekanannya kembali ke penggunaan unit relative seperti rem untuk teks dan spasi yang terkait. Meskipun vh itu responsif terhadap tinggi layar, dia tidak membantu pengguna yang butuh memperbesar ukuran teks secara keseluruhan di browser mereka. Jadi, vh baik untuk layout, tapi bukan pengganti unit teks yang aksesibel.

Menggabungkan Kekuatan Unit: Bukan Pilih Salah Satu, Tapi Keduanya!¶

Pada akhirnya, perdebatan antara vh dan px bukanlah soal mana yang lebih baik secara mutlak, tapi mana yang lebih baik untuk skenario tertentu. px memberikan presisi yang Anda butuhkan untuk detail, sementara vh memberikan fleksibilitas responsif yang krusial untuk layout modern.

Pengembang web profesional yang mahir tahu cara menggabungkan berbagai unit CSS — px, vh, vw, em, rem, dan lainnya — untuk membangun website yang kuat, fleksibel, responsif, dan mudah diakses. Pemilihan unit yang tepat adalah seni sekaligus sains, yang membutuhkan pemahaman mendalam tentang bagaimana setiap unit bekerja dan berinteraksi.

Nah, sekarang Anda sudah tahu perbedaan mendasar antara vh dan px, serta kapan dan bagaimana cara menggunakannya. Semoga penjelasan ini membantu Anda membuat keputusan yang lebih baik saat ngoding CSS nanti!

Gimana, udah lebih jelas kan soal bedanya vh sama px? Atau mungkin Anda punya pengalaman unik pakai kedua unit ini? Share di kolom komentar ya! Siapa tahu ada tips atau trik lain yang bisa kita pelajari bareng.