Bagaimanakah media queries membolehkan reka bentuk responsif?

Question

Accepted Answer

**Media queries** menerapkan CSS secara bersyarat berdasarkan ciri-ciri peranti — selalunya **lebar viewport** — membenarkan satu helaian gaya menyesuai dengan telefon, 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) berbanding 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`) secara amnya lebih diutamakan: anda menulis gaya asas yang mudah untuk skrin kecil, kemudian secara progresif menambah kerumitan untuk yang lebih besar. Ini cenderung menghasilkan CSS yang lebih bersih dan ringan serta sepadan dengan cara kandungan disusun semula.

## Pertanyaan berguna lain

```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 kepada *pilihan* pengguna, bukan saiz skrin — penting untuk kebolehcapaian dan penggayaan tema.

## Menggabungkan syarat

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

## Nota tentang masa depan: container queries

Media queries merespons ke **viewport**; **container queries** yang lebih baru (`@container`) merespons kepada saiz *elemen induk* — lebih baik untuk komponen yang benar-benar boleh digunakan semula. Ia melengkapi media queries daripada menggantikannya.

## Mengapa ia penting

Media queries adalah asas reka bentuk responsif — menyesuaikan susun atur, jarak, dan lajur dengan saiz skrin.

Pendekatan mobile-first `min-width` memastikan CSS dapat diurus, dan pertanyaan pilihan (`prefers-reduced-motion`, `prefers-color-scheme`) memperluaskan responsiviti kepada kebolehcapaian dan penggayaan tema.