CSS #6: Responsif Desain

Responsif desain adalah pendekatan dalam desain web yang memastikan tampilan situs web tetap optimal di berbagai ukuran layar dan perangkat. Dengan responsif desain, situs web akan beradaptasi secara otomatis tergantung pada resolusi layar, memastikan pengalaman pengguna yang konsisten di berbagai perangkat.

1*qF8LfAwUhl57g9T0BVvVdg.jpeg

1. Media Queries

Pengenalan Media Queries

Media queries adalah fitur CSS yang digunakan untuk menerapkan gaya berbeda tergantung pada karakteristik perangkat pengguna, seperti ukuran layar, orientasi, dan resolusi. Dengan menggunakan media queries, kita dapat mengatur desain yang berubah secara dinamis berdasarkan kondisi tertentu, seperti viewport yang lebih lebar atau sempit.

Media queries berfungsi dengan memeriksa kondisi perangkat dan menyesuaikan aturan CSS yang diterapkan berdasarkan hasil pemeriksaan tersebut.

Contoh Penerapan Media Queries

Berikut adalah contoh penggunaan media queries untuk mengubah layout pada berbagai ukuran layar:

/* Desain untuk layar lebih lebar dari 768px */
@media screen and (min-width: 768px) {
  body {
    background-color: lightblue;
  }
  .container {
    width: 80%;
    margin: 0 auto;
  }
}

/* Desain untuk layar lebih kecil dari 768px */
@media screen and (max-width: 767px) {
  body {
    background-color: lightgreen;
  }
  .container {
    width: 100%;
    padding: 10px;
  }
}

Pada contoh di atas:

Jika layar lebih lebar dari 768px, background akan berwarna biru muda dan lebar container menjadi 80%.
Jika layar lebih kecil dari 768px, background akan berwarna hijau muda dan lebar container berubah menjadi 100%.

Media queries memungkinkan kita untuk mengoptimalkan tampilan di berbagai perangkat seperti desktop, tablet, dan smartphone.

2. Unit Responsif

vw, vh, %, em, rem

Selain media queries, unit-unit responsif juga penting dalam pembuatan desain yang fleksibel. Beberapa unit yang sering digunakan adalah:

vw (viewport width): Mengacu pada lebar viewport. 1vw sama dengan 1% dari lebar viewport.
vh (viewport height): Mengacu pada tinggi viewport. 1vh sama dengan 1% dari tinggi viewport.
% (persentase): Digunakan untuk mendefinisikan ukuran relatif terhadap elemen induknya.
em: Berdasarkan ukuran font elemen induk. Misalnya, 2em berarti dua kali ukuran font elemen induk.
rem (root em): Berdasarkan ukuran font elemen root (html). Misalnya, jika ukuran font root adalah 16px, maka 1rem = 16px.

Contoh Penggunaan Unit Responsif

.container {
  width: 80vw; /* 80% dari lebar viewport */
  height: 50vh; /* 50% dari tinggi viewport */
  padding: 2em; /* 2 kali ukuran font elemen induk */
  font-size: 1.5rem; /* 1.5 kali ukuran font root */
}

Dengan menggunakan unit-unit ini, layout akan menyesuaikan secara otomatis dengan ukuran viewport, memberikan tampilan yang lebih responsif.

Kesimpulan

Menggabungkan media queries dengan unit responsif seperti vw, vh, %, em, dan rem memungkinkan desain web yang adaptif dan optimal di berbagai perangkat. Pendekatan ini memastikan pengalaman pengguna yang konsisten, baik di layar besar maupun kecil.

Sumber: