Come le media query abilitano il responsive design?

Question

IT Interview Practice · Accepted Answer

Le **media query** applicano CSS condizionalmente in base alle caratteristiche del dispositivo — il più delle volte la **larghezza del viewport** — permettendo a un foglio di stile di adattarsi a telefoni, tablet e 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`) è generalmente preferito: scrivi stili di base semplici per schermi piccoli, poi progressivamente aggiungi complessità per schermi più grandi. Questo tende a produrre CSS più pulito e leggero e corrisponde al modo in cui il contenuto si riflette.

## Altre query utili

```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` e `prefers-color-scheme` rispondono alle *preferenze* dell'utente, non alle dimensioni dello schermo — importante per l'accessibilità e la personalizzazione.

## Combinare le condizioni

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

## Una nota sul futuro: container query

Le media query rispondono al **viewport**; le più recenti **container query** (`@container`) rispondono alle dimensioni di un *elemento padre* — migliore per componenti veramente riutilizzabili. Integrano le media query piuttosto che sostituirle.

## Perché è importante

Le media query sono il fondamento del responsive design — adattando layout, spaziatura e colonne alle dimensioni dello schermo.

L'approccio mobile-first con `min-width` mantiene il CSS gestibile, e le query di preferenza (`prefers-reduced-motion`, `prefers-color-scheme`) estendono la reattività all'accessibilità e alla personalizzazione.

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

Altre query utili

Combinare le condizioni

Una nota sul futuro: container query

Perché è importante

Domande correlate