Ukuran dalam CSS: PX, EM, REM, dan VH untuk Desain Web adalah dasar penting yang perlu kalian kuasai agar tampilan website tetap rapi, responsif, dan nyaman dilihat di berbagai perangkat.
Halo teman-teman, sering kali kita bingung memilih satuan mana yang tepat: kapan memakai px, kapan memakai em atau rem, dan kapan menggunakan vh untuk layout penuh layar. Pada artikel ini kodelyly.com akan membahas ukuran dalam CSS: PX, EM, REM, dan VH untuk Desain Web beserta contoh koding lengkap dan penjelasannya.
Ukuran Dalam CSS: PX, EM, REM, Dan VH Untuk Desain Web
Secara umum, satuan CSS dibagi menjadi dua jenis, yaitu satuan absolut dan satuan relatif. PX termasuk satuan absolut yang nilainya tetap, sedangkan EM, REM, dan VH termasuk satuan relatif yang menyesuaikan konteks sekitarnya, seperti ukuran font induk atau tinggi layar (viewport). Memahami perbedaan ini akan membantu kalian membuat desain yang mudah diatur dan lebih fleksibel.
Untuk gambaran singkat, perhatikan tabel berikut.
| Satuan | Jenis | Relatif terhadap | Contoh penggunaan utama |
|---|---|---|---|
| px | Absolut | Pixel layar | Ikon, border, teks kecil yang presisi |
| em | Relatif | font-size elemen parent | Tipografi yang mengikuti konteks section |
| rem | Relatif | font-size root (html) | Skala global yang konsisten |
| vh | Relatif | Tinggi viewport | Hero section dan layout fullscreen |
Contoh Penggunaan PX Di CSS
PX (pixel) adalah satuan yang paling sering dipakai pemula. Nilai px tidak bergantung pada elemen lain sehingga mudah diprediksi.
Contoh koding PX:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh PX</title>
<style>
.judul-px {
font-size: 32px; /* tinggi huruf 32 pixel */
margin-bottom: 10px;
}
.teks-px {
font-size: 16px; /* tinggi huruf 16 pixel */
line-height: 1.6;
}
</style>
</head>
<body>
<h1 class="judul-px">Judul Menggunakan PX</h1>
<p class="teks-px">
Paragraf ini memakai ukuran 16px, cocok untuk teks yang ingin kalian kunci ukurannya
agar tetap konsisten di berbagai bagian halaman.
</p>
</body>
</html>
Pada contoh di atas, ukuran 32px dan 16px tidak bergantung pada elemen lain. Kelebihannya adalah mudah diatur dan sangat presisi, namun jika terlalu banyak memakai px, desain bisa kurang fleksibel terhadap perubahan setting font pada browser.
Contoh EM Dan REM Untuk Tipografi Fleksibel
EM adalah satuan relatif terhadap font-size elemen parent (induk). Jika parent berukuran 18px dan anak memakai 1.5em, maka ukuran teks anak menjadi 27px.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh EM</title>
<style>
.parent-em {
font-size: 18px; /* basis em = 18px */
padding: 10px;
background-color: #f3f4f6;
}
.child-em {
font-size: 1.5em; /* 1.5 x 18px = 27px */
}
</style>
</head>
<body>
<div class="parent-em">
<p>Ini teks parent berukuran 18px.</p>
<p class="child-em">Ini teks anak 1.5em (sekitar 27px).</p>
</div>
</body>
</html>
Jika kalian mengubah font-size pada .parent-em, maka ukuran .child-em akan menyesuaikan secara otomatis karena em selalu mengikuti parent.
REM (root em) berbeda sedikit. REM selalu merujuk pada font-size elemen html (root), bukan parent lokal. Ini membuat skala tipografi lebih konsisten di seluruh halaman.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh REM</title>
<style>
html {
font-size: 16px; /* 1rem = 16px */
}
.judul-rem {
font-size: 2rem; /* 2 x 16px = 32px */
}
.teks-rem {
font-size: 1rem; /* 1 x 16px = 16px */
line-height: 1.7;
}
</style>
</head>
<body>
<h1 class="judul-rem">Judul Menggunakan REM</h1>
<p class="teks-rem">
Paragraf ini memakai 1rem. Jika kalian nanti mengubah font-size pada elemen html,
semua elemen yang memakai rem akan ikut menyesuaikan ukurannya.
</p>
</body>
</html>
Dengan rem, kalian cukup mengubah satu nilai di html untuk mengatur ulang skala tipografi global, sehingga sangat membantu untuk desain yang mudah di-maintain.
Contoh VH Untuk Layout Penuh Layar
VH (viewport height) adalah satuan yang mengacu pada tinggi layar browser. Nilai 1vh sama dengan 1 persen tinggi viewport. Jika ingin membuat section setinggi layar, kalian bisa memakai 100vh.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh VH</title>
<style>
.hero-vh {
height: 100vh; /* tinggi selalu penuh 1 layar */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, #1d4ed8, #4c1d95);
color: #f9fafb;
}
</style>
</head>
<body>
<section class="hero-vh">
<div>
<h1>Hero Fullscreen dengan 100vh</h1>
<p>Bagian ini selalu setinggi layar, cocok untuk judul besar dan tombol aksi utama.</p>
</div>
</section>
</body>
</html>
Pada contoh tersebut, section dengan class hero-vh akan selalu mengikuti tinggi layar perangkat, sehingga tampilan hero menjadi lebih modern dan fokus.
Kesimpulan
Ukuran dalam CSS: PX, EM, REM, dan VH untuk Desain Web memberi kalian fleksibilitas dalam mengatur tipografi dan layout. PX cocok untuk elemen yang membutuhkan ukuran presisi, EM dan REM ideal untuk skala tipografi yang fleksibel dan konsisten, sedangkan VH sangat berguna untuk membuat section penuh layar yang responsif. Dengan memahami perbedaan dan contoh koding di atas, kalian bisa mengkombinasikan satuan ini agar desain web kodelyly.com maupun proyek lainnya terlihat profesional dan nyaman digunakan.
Sekian artikel dari kodelyly.com, semoga pembahasan dan contoh koding ini membantu kalian memahami ukuran dalam CSS dengan lebih jelas.