Responsif dengan Media Query

Satu website, banyak layar

Website diakses dari HP 360px sampai monitor 2560px. Media query memungkinkanmu menerapkan CSS berbeda berdasarkan kondisi perangkat, paling umum lebar viewport.

Sintaks dasar

/* gaya default (layar besar) */
.kolom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

/* kalau layar 768px ke bawah, jadi satu kolom */
@media (max-width: 768px) {
  .kolom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) berarti "terapkan blok ini hanya kalau lebar viewport maksimal 768px". Ada juga min-width ("minimal selebar ini").

Breakpoint yang masuk akal

Tidak ada angka sakral, tapi ini titik awal yang umum dipakai:

/* tablet ke bawah */
@media (max-width: 1024px) { ... }

/* HP besar ke bawah */
@media (max-width: 768px) { ... }

/* HP kecil */
@media (max-width: 480px) { ... }

Jangan menghafal mati: breakpoint ideal ditentukan oleh kapan layout-mu mulai rusak, bukan oleh ukuran perangkat tertentu. Kecilkan jendela browser pelan-pelan, dan pasang breakpoint di titik layout mulai terlihat aneh.

Pola responsif paling umum

1. Kolom jadi baris:

.kartu-ganda {
  display: flex;
  gap: 24px;
}

@media (max-width: 700px) {
  .kartu-ganda {
    flex-direction: column;
  }
}

2. Sembunyikan yang tidak penting:

@media (max-width: 768px) {
  .sidebar-iklan {
    display: none;
  }
}

3. Kecilkan tipografi:

h1 {
  font-size: 3rem;
}

@media (max-width: 600px) {
  h1 {
    font-size: 2rem;
  }
}

Menggabungkan kondisi

/* hanya tablet: antara 769 dan 1024 */
@media (min-width: 769px) and (max-width: 1024px) {
  .kolom {
    grid-template-columns: 1fr 1fr;
  }
}

/* layar besar ATAU orientasi landscape */
@media (min-width: 1200px), (orientation: landscape) {
  /* koma = OR */
}

and berarti semua kondisi harus terpenuhi, koma berarti salah satu cukup.

Catatan teknis: media query juga bisa mendeteksi preferensi pengguna, bukan cuma ukuran layar. Contoh: @media (prefers-reduced-motion: reduce) buat mematikan animasi bagi yang sensitif gerak, dan @media (prefers-color-scheme: dark) buat tema gelap otomatis. Ini fitur aksesibilitas yang murah tapi berdampak besar.

Meta viewport: jangan lupa!

Media query tidak berguna di HP tanpa baris ini di <head>:

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

Tanpa ini, browser HP menganggap halaman selebar 980px lalu mengecilkannya, sehingga media query-mu tidak pernah aktif. Satu baris, tapi fatal kalau lupa.

Rangkuman

Media query menerapkan CSS berdasarkan kondisi (umumnya lebar). Pasang breakpoint di titik layout rusak, bukan angka hafalan. Kuasai tiga pola: kolom jadi baris, sembunyikan yang tidak penting, sesuaikan tipografi. Dan jangan pernah lupa meta viewport.