Kif il-media queries jagħtu riżultat għad-disinn responsiv?

Question

Accepted Answer

**Media queries** japplikaw CSS b'mod kondizzjonali abbażi tal-karatteristiċi tal-apparat — ħafna drabi l-**wisa' tal-viewport** — jagħtu l-possibbiltà li stylesheet wieħed jadatt għall-mowbajli, tablets, u 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) kuntrast ma' 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`) ġeneralment huwa preferut: inti tikteb stili bażiċi sempliċi għal skrin żgħar, imbagħad gradwalment iżżid kumplissità għal dawk akbar. Din it-tendenza tipproduċi CSS aktar nadif u ħafif u taqbel mal-mod kif il-kontenut jiġi rriarranġat.

## Queries utili oħra

```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` u `prefers-color-scheme` irrispondu għal *preferenzi* tal-utent, mhux għall-wisa' tal-iskrin — importanti għall-aċċessibilità u l-tema.

## Tikkombina l-kundizzjonijiet

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

## Nota dwar il-futur: container queries

Media queries jirrispondu għall-**viewport**; **container queries** aktar ġodda (`@container`) jirrispondu għal-wisa' ta' *element ġenitur* — aħjar għal komponenti li verament jistgħu jerġgħu jintużaw. Huma jikkompletaw il-media queries minflok jibdluha.

## Għaliex huwa importanti

Media queries huma l-pedament tad-disinn responsiv — jadattaw il-layout, l-ispazjar, u l-kolonni mal-wisa' tal-iskrin.

L-approċċ mobile-first `min-width` iġżomm il-CSS immaniġġjabbli, u l-queries tal-preferenzi (`prefers-reduced-motion`, `prefers-color-scheme`) jestendu r-responsività għall-aċċessibilità u l-tema.