Bayangin kamu nulis website yang cuma kelihatan bagus di laptop. User buka di HP — semua kepencet, kekecilan, scroll horizontal kemana-mana. Tahun 2010-an ke bawah, banyak website memang gitu — desktop only. Lalu media queries lahir, dan responsive design jadi standar baru. Satu codebase HTML+CSS, tapi adapt ke ukuran layar apapun: HP, tablet, laptop, TV, bahkan smartwatch. Mobile-first approach (tulis mobile dulu, scale up) jadi best practice modern.

💡 Tahukah kamu? 60%+ traffic web dunia datang dari mobile. Kalau website kamu gak responsive, kamu udah kehilangan 60% potensi user sebelum konten kamu sempat dilihat. Media queries bukan opsional — wajib di abad 21.

Sintaks dasar:

@media (max-width: 768px) {
  /* CSS ini hanya berlaku jika lebar layar <= 768px */
  .container {
    flex-direction: column;
  }
}

Breakpoint yang umum digunakan:

• max-width: 480px — ponsel kecil
• max-width: 768px — tablet
• max-width: 1024px — tablet landscape / laptop kecil
• min-width: 1200px — desktop besar

Mobile-first approach (disarankan) — tulis CSS untuk mobile dulu, lalu tambahkan untuk layar besar:

/* Default: mobile */
.grid {
  display: flex;
  flex-direction: column;
}

/* Tablet ke atas */
@media (min-width: 768px) {
  .grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .grid {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Jangan lupa meta viewport di HTML agar responsive berfungsi:

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

🎭 Analogi sehari-hari

Media queries = TV ubah aspect ratio sesuai input source. HP vertical (max-width: 768) → layout 1 kolom. Tablet (min-width: 768) → 2 kolom. Desktop besar (min-width: 1200) → 3 kolom + sidebar. Browser deteksi ukuran, apply CSS yang cocok.

⚠️ Jebakan yang sering ditemui

• Mobile-first lebih hemat code — default mobile, naik via min-width. Vs desktop-first: bertumpuk override.
• Lupa <meta viewport> = mobile zoom-out, breakpoints tidak trigger.
• Pixel breakpoint hardcoded = brittle. Pakai em/rem agar respect user zoom.
• max-width: 768px dan min-width: 768px keduanya match di TEPAT 768px → kedua block jalan, urutan menentukan.
• (orientation: landscape) untuk landscape vs portrait.
• Container Queries (modern) > Media Queries untuk component-level responsive — lesson terpisah.
• prefers-color-scheme: dark untuk dark mode auto.
• prefers-reduced-motion: reduce = matikan animasi untuk a11y.

🎯 Media query vs Container query — pilih yang mana?

• Layout halaman global (1 kolom mobile, 2 kolom tablet, 3 kolom desktop) → @media
• Komponen reusable (kartu produk: vertikal di sidebar sempit, horizontal di main lebar) → @container
• Cek device feature (touch vs mouse, dark mode, reduced motion) → @media (hover:...), @media (prefers-...)
• Cek browser support (CSS Grid? :has()?) → @supports

Modern: pake container query untuk komponen, media query untuk layout halaman + device preferences. Bukan kompetitor — beda use case.

TL;DR: Media queries = adapt CSS ke ukuran layar/device. Sintaks @media (min-width: 768px) { ... }. Mobile-first (default mobile, scale up via min-width) lebih hemat code dari desktop-first. Wajib <meta viewport> di HTML biar responsive jalan. Bonus: prefers-color-scheme: dark (auto dark mode), prefers-reduced-motion (a11y), (hover: hover) (touch vs mouse). 60%+ traffic web dari mobile — responsive WAJIB.