Media queries: @media, min-width, max-width e range syntax moderna

Siamo arrivati allo strumento tecnico che rende materialmente possibile il Responsive Design.

Le Media Queries sono delle “istruzioni condizionali” in CSS. Ti permettono di dire al browser: “Ignora queste regole CSS, a meno che lo schermo non rispetti una certa condizione”.

La sintassi classica

La condizione più utilizzata in assoluto riguarda la larghezza dello schermo (il viewport). Usando l’approccio Mobile-first visto in precedenza, scriveremo prima il CSS base, e poi aggiungeremo una Media Query per gli schermi più larghi.

/* 1. CSS BASE (Mobile-first) */
.card-container {
  display: flex;
  flex-direction: column; /* Su smartphone, le card sono impilate in colonna */
}

/* 2. LA MEDIA QUERY (Tablet e Desktop) */
@media (min-width: 768px) {
  /* Tutto ciò che è qui dentro verrà letto SOLO se 
     lo schermo è largo 768px o più! */
  
  .card-container {
    flex-direction: row; /* Su schermi grandi, affiancale! */
  }
}

min-width vs max-width

• (min-width: 768px) significa: “Applica queste regole da 768px in su (all’infinito)”. È la logica Mobile-first (si parte dal piccolo e si aggiungono complessità salendo).
• (max-width: 767px) significa: “Applica queste regole da 0px fino a un massimo di 767px”. È la logica Desktop-first.

Consiglio d’oro: Un buon progetto usa quasi esclusivamente min-width. Usa max-width solo in casi di estrema emergenza o per fix molto isolati.

La nuova Range Syntax (Sintassi Moderna)

Recentemente, i browser hanno introdotto un modo molto più intuitivo e matematico per scrivere le media queries, chiamato Media Queries Level 4.

Invece di usare i concetti testuali di min e max, puoi usare i simboli matematici maggiore (>), minore (<) e uguale (=).

/* Sintassi Vecchia (min-width) */
@media (min-width: 768px) { ... }

/* Nuova Sintassi (Uguale significato, più leggibile!) */
@media (width >= 768px) { ... }

La sintassi moderna brilla davvero quando devi isolare un “range” specifico, per esempio solo i tablet (non smartphone, non desktop grandi).

/* Sintassi Vecchia: Verbosa e complessa */
@media (min-width: 768px) and (max-width: 1024px) { ... }

/* Nuova Sintassi: Logica pura */
@media (768px <= width <= 1024px) { ... }

Oggi la Range Syntax è supportata da tutti i browser moderni ed è fortemente consigliata per scrivere CSS più pulito e comprensibile!

Esercizi

Base · facile

Scrivi una media query mobile-first che affianca le card (flex-direction: row) da 768px in su.

@media (width >= 768px) {
  .cards { flex-direction: row; }
}

Intermedio · medio

Riscrivi @media (min-width: 768px) and (max-width: 1024px) con la range syntax moderna per isolare i soli tablet, e spiega perché min-width è preferibile a max-width come default.

Sfida · difficile

Progetta un componente che cambia in tre fasi (mobile, tablet, desktop) usando solo min-width. Spiega perché incatenare media query min-width evita le sovrascritture tipiche del mix min+max, e quando un singolo range (a <= width <= b) è davvero giustificato.