Bagaimana media queries memungkinkan desain responsif?

Question

Accepted Answer

**Media queries** menerapkan CSS secara kondisional berdasarkan karakteristik perangkat — paling sering **lebar viewport** — memungkinkan satu stylesheet beradaptasi dengan ponsel, tablet, dan desktop.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Mobile-first (min-width) vs desktop-first (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobile-first** (`min-width`) umumnya lebih disukai: Anda menulis gaya dasar sederhana untuk layar kecil, lalu secara progresif menambahkan kompleksitas untuk layar yang lebih besar. Ini cenderung menghasilkan CSS yang lebih bersih dan ringan, serta sesuai dengan cara konten mengalir kembali.

## Query berguna lainnya

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` dan `prefers-color-scheme` merespons *preferensi* pengguna, bukan ukuran layar — penting untuk aksesibilitas dan penentuan tema.

## Menggabungkan kondisi

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## Catatan tentang masa depan: container queries

Media queries merespons **viewport**; **container queries** yang lebih baru (`@container`) merespons ukuran *elemen induk* — lebih baik untuk komponen yang benar-benar dapat digunakan kembali. Mereka melengkapi media queries daripada menggantinya.

## Mengapa ini penting

Media queries adalah fondasi desain responsif — menyesuaikan tata letak, jarak, dan kolom dengan ukuran layar.

Pendekatan `min-width` mobile-first membuat CSS dapat dikelola, dan query preferensi (`prefers-reduced-motion`, `prefers-color-scheme`) memperluas responsivitas ke aksesibilitas dan penentuan tema.