Penggunaan Relative Units

Unit-unit relatif dalam CSS adalah cara yang kuat untuk membuat desain yang responsif dan fleksibel. Mereka mengukur elemen-elemen HTML berdasarkan konteks yang lebih besar daripada unit-unit tetap seperti piksel. Ini memungkinkan tampilan yang baik pada berbagai perangkat dan resolusi layar. Berikut adalah beberapa unit relatif yang paling umum digunakan:

1. % (Persentase)

Persentase adalah salah satu unit relatif yang paling sering digunakan. Ini mengukur elemen relatif terhadap elemen yang mengandungnya. Misalnya, jika Anda ingin lebar sebuah elemen div menjadi 50% dari lebar elemen yang mengandungnya, Anda dapat menggunakan:

div {
    width: 50%;
}

2. em

Satu em setara dengan ukuran font elemen yang berlaku. Misalnya, jika ukuran font elemen Anda adalah 16px, maka 1em akan setara dengan 16px. Untuk mengganti ukuran font, Anda bisa menggunakannya:

p {
    font-size: 1.2em; /* Ukuran font sekarang adalah 1.2 kali ukuran font aslinya. */
}

3. rem

rem (root em) mirip dengan em, tetapi mengukur elemen relatif terhadap ukuran font root dokumen (biasanya elemen <html>). Ini sangat berguna untuk membuat desain yang konsisten di seluruh situs web Anda tanpa tergantung pada elemen induk tertentu:

body {
    font-size: 16px; /* Misalnya, kita mengatur ukuran font root ke 16px */
}

p {
    font-size: 1.2rem; /* Ukuran font akan 1.2 kali ukuran font root, bukan elemen induk. */
}

4. vw dan vh

vw (viewport width) dan vh (viewport height) adalah unit relatif yang mengukur elemen berdasarkan lebar dan tinggi viewport (area tampilan browser) secara relatif. Misalnya, untuk membuat elemen lebar 50% dari lebar viewport, Anda bisa menggunakan:

div {
    width: 50vw;
}

5. vmin dan vmax

vmin dan vmax adalah unit relatif yang mengukur elemen berdasarkan nilai minimum dan maksimum antara lebar dan tinggi viewport. Ini dapat berguna dalam beberapa situasi desain responsif.

div {
    width: 50vmin; /* Lebar elemen setara dengan 50% dari nilai minimum antara lebar dan tinggi viewport. */
}

Unit-unit relatif ini memberikan fleksibilitas yang besar dalam desain web responsif. Gunakan dengan bijak sesuai dengan kebutuhan proyek Anda. Semoga tutorial ini membantu Anda memahami penggunaan unit-unit relatif dalam CSS!

PREVIOUS
NEXT