Menjelajahi Ukuran dalam CSS: PX, EM, REM, dan VH untuk Desain Web yang Responsif
Faisal Hanafi 3 Agustus 2023
Halo Coders! Di dunia desain web, mengatur ukuran elemen adalah langkah penting untuk menciptakan tampilan yang sesuai dan konsisten. Dalam CSS, ada beberapa unit ukuran yang dapat kita gunakan untuk menentukan dimensi dan ukuran elemen. berikut ini adalah cara menghitung ukuran pada CSS dengan menggunakan unit PX, EM, REM, dan VH, sehingga kita dapat dengan mudah mengelola tata letak dan tampilan situs web kita.
1. PX (Pixel)
Pixel (PX) adalah unit ukuran yang paling umum digunakan dalam CSS. Satu pixel mewakili satu titik gambar pada layar, dan ukuran elemen yang ditentukan dalam piksel akan tetap konsisten di berbagai perangkat dan resolusi layar. Namun, menggunakan piksel dapat menyebabkan tampilan yang tidak responsif pada perangkat dengan ukuran layar yang berbeda.
Contoh penggunaan:
h1 {
font-size: 24px; /* Ukuran font 24 piksel */
width: 300px; /* Lebar elemen 300 piksel */
}
2. EM
Unit EM adalah ukuran yang relatif terhadap ukuran font elemen induk. Jika kita mengatur ukuran font elemen utama ke 16px, maka 1em setara dengan 16px, 2em setara dengan 32px, dan seterusnya. Ini membuat penggunaan EM berguna untuk mengatur ukuran font atau dimensi elemen berdasarkan skala font elemen induk.
Contoh penggunaan:
body {
font-size: 16px; /* Ukuran font elemen induk */
}
p {
font-size: 1.2em; /* Ukuran font 1.2 kali dari font elemen induk (19.2px) */
line-height: 1.5em; /* Jarak baris 1.5 kali dari ukuran font (24px) */
}
3. REM (Root EM)
Unit REM juga relatif terhadap ukuran font, tetapi dihitung berdasarkan ukuran font elemen root (biasanya elemen <html>). Ini berarti REM akan tetap konsisten tergantung pada ukuran font elemen root dan tidak dipengaruhi oleh ukuran font elemen lainnya. REM sangat cocok digunakan untuk membuat situs web yang responsif.
Contoh penggunaan:
html {
font-size: 16px; /* Ukuran font elemen root */
}
p {
font-size: 1.5rem; /* Ukuran font 1.5 kali dari ukuran font elemen root (24px) */
margin-bottom: 1.2rem; /* Jarak bawah 1.2 kali dari ukuran font elemen root (19.2px) */
}
4. VH (Viewport Height)
Unit VH mengukur ukuran elemen berdasarkan tinggi viewport (tinggi layar) pengguna. Satu unit VH setara dengan 1% dari tinggi viewport. Ini sangat berguna untuk mengatur elemen agar sesuai dengan tinggi layar, terlepas dari perangkat atau resolusi yang digunakan pengguna.
Contoh penggunaan:
section {
height: 100vh; /* Tinggi elemen sama dengan tinggi viewport pengguna */
}
div {
height: 50vh; /* Tinggi elemen setengah dari tinggi viewport pengguna */
}
Menghitung ukuran pada CSS dengan benar sangat penting untuk menciptakan tampilan yang responsif dan sesuai dengan berbagai perangkat dan resolusi layar. Penggunaan unit PX, EM, REM, dan VH memberikan fleksibilitas dalam mengelola tata letak dan tampilan elemen. PX adalah unit ukuran absolut yang cocok untuk ukuran tetap, sedangkan EM dan REM relatif terhadap ukuran font elemen. Unit VH sangat berguna untuk mengatur elemen berdasarkan tinggi viewport. Pilihlah unit ukuran yang sesuai dengan kebutuhan dan desain situs web kita, sehingga kita dapat menciptakan tampilan yang menarik, konsisten, dan responsif untuk para pengguna. Semoga artikel ini membantu kita memahami konsep ukuran pada CSS dengan lebih baik!