Kepiye media queries ngaktifake responsive design?

Question

IT Interview Practice · Accepted Answer

**Media queries** ngetrapake CSS sacara kondisional adhedhasar karakteristik perangkat — paling asring **lebar viewport** — ngidini siji stylesheet pas kanggo smartphone, tablet, lan 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) lawan 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`) sacara umum luwih disengkuyung: sampeyan nulis gaya dhasar sing prasaja kanggo layar cilik, banjur kanthi bertahap nambah kerumitan kanggo sing luwih gedhe. Iki cenderunge ngasilake CSS sing luwih resik lan enteng sarta selaras karo carane konten bisa diatur maneh.

## Pitakonan liyane sing migunani

```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` lan `prefers-color-scheme` ngarespons *pilihan* pangguna, dudu ukuran layar — penting kanggo aksesibilitas lan tema.

## Nggabungake kondisi

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

## Catetan babagan masa depan: container queries

Media queries ngarespons ing **viewport**; **container queries** sing luwih anyar (`@container`) ngarespons pada ukuran *elemen induk* — luwih apik kanggo komponen sing bener-bener bisa dienggo maneh. Padha nglengkapi media queries tinimbang ngganti.

## Apa gunane

Media queries yaiku fondasi responsive design — nyadhur tata letak, spasi, lan kolom marang ukuran layar.

Pendekatan mobile-first `min-width` tetep CSS bisa dikempal, lan pitakonan pilihan (`prefers-reduced-motion`, `prefers-color-scheme`) istwa responsivitas menyang aksesibilitas lan tema.

Mobile-first (min-width) lawan desktop-first (max-width)

Pitakonan liyane sing migunani

Nggabungake kondisi

Catetan babagan masa depan: container queries

Apa gunane

Pitakon sing gegandhengan