Si e mundësojnë pyetjet mediatike hartimin reagues?

Question

Accepted Answer

**Pyetjet mediatike** aplikojnë CSS në mënyrë të kushtëzuar bazuar në karakteristikat e pajisjes — më shpesh **gjerësinë e porthulit të shikimit** — duke lejuar që një fletë stilesh të përshtatet me telefonat, tabletët dhe kompjuterat e tavolinës.

```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; }
}
```

## Mobil-i-parë (min-width) vs tavolinë-e-parë (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) { ... }
```

**Mobil-i-parë** (`min-width`) përgjithësisht preferohet: ju shkruani stilet bazë të thjeshta për ekrane të vogla, më pas progresivisht shtoni kompleksitet për ato më të mëdha. Kjo tenton të prodhojë CSS më të pastër, më të lehtë dhe përputhet me mënyrën se si përmbajtja ri-rrjedh.

## Pyetje të tjera të dobishme

```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` dhe `prefers-color-scheme` i përgjigjen *preferencave* të përdoruesit, jo madhësisë së ekranit — i rëndësishëm për aksesibilitetin dhe temën.

## Kombinimi i kushteve

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

## Një shënim për të ardhmen: pyetje të enëve

Pyetjet mediatike i përgjigjen **porthulit të shikimit**; pyetjet më të reja **të enëve** (`@container`) i përgjigjen madhësisë së *një elementi prind* — më mirë për komponentë vërtet të ri-përdorshme. Ato plotësojnë pyetjet mediatike më tepër sesa t'i zëvendësojnë ato.

## Përse është e rëndësishme

Pyetjet mediatike janë themelimi i hartimit reaguel — përshtatje e paraqitjes, përzierjeve, dhe kolonave me madhësinë e ekranit.

Qasja mobil-i-parë `min-width` e mban CSS të menaxhueshëm, dhe pyetjet e preferencave (`prefers-reduced-motion`, `prefers-color-scheme`) zgjerohet reagueshmëria në aksesibilitet dhe teme.