Desain Responsif & Media Query

Kenapa responsif?

Lebih dari separuh pengunjung website membuka dari ponsel. Halaman yang bagus di laptop tapi berantakan di ponsel akan ditinggalkan. Desain responsif berarti satu halaman yang menyesuaikan diri dengan ukuran layar apa pun.

Langkah 1: meta viewport

Di <head> HTML wajib ada:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Tanpa ini, ponsel menampilkan halaman seolah selebar desktop lalu mengecilkannya.

Langkah 2: media query

Media query menerapkan aturan CSS hanya bila kondisi terpenuhi, misalnya lebar layar tertentu.

.kartu { padding: 12px; }

@media (min-width: 768px) {
  .kartu { padding: 24px; }   /* hanya berlaku bila lebar layar ≥ 768px */
}

Mobile-first: mulai dari layar kecil

Pendekatan yang disarankan: tulis gaya dasar untuk ponsel tanpa media query, lalu tambahkan gaya untuk layar lebih besar dengan min-width. Kodenya lebih ringkas, dan ponsel (perangkat paling lemah) tidak perlu memproses banyak aturan.

/* Dasar: ponsel, satu kolom */
.fitur {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet: dua kolom */
@media (min-width: 700px) {
  .fitur { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: tiga kolom */
@media (min-width: 1000px) {
  .fitur { grid-template-columns: repeat(3, 1fr); }
}

Breakpoint yang umum

Jangan terpaku pada nama perangkat. Tentukan breakpoint saat tampilan mulai terlihat jelek: kecilkan jendela browser dan lihat di lebar berapa isi mulai sesak.

Tips responsif

• Pakai max-width dan persen daripada width tetap.
• Pakai flex-wrap, auto-fit, dan clamp() agar banyak hal beradaptasi tanpa media query.
• Uji dengan mode perangkat di DevTools (ikon ponsel) dan di ponsel sungguhan.
• Area tombol/tautan di ponsel minimal sekitar 44×44px agar mudah disentuh.