Media Query CSS: Guida Completa al Responsive Design

Introduzione

Quando navighiamo su un sito web, ci aspettiamo che il suo layout si adatti automaticamente al nostro dispositivo, sia esso uno smartphone con uno schermo piccolo o un grande monitor desktop. Questa “magia” avviene grazie al responsive design, e nello specifico alle media query CSS. In questo articolo scoprirai:

• Cosa sono le media query e perché sono importanti
• Come usarle per creare layout responsive
• Breakpoint tipici da utilizzare
• Esempi pratici e consigli avanzati

Cosa sono le Media Query

Le media query sono regole CSS che consentono di applicare stili diversi a seconda di alcune condizioni, come ad esempio:

• Larghezza o altezza dello schermo (width, height)
• Orientamento del dispositivo (orientation)
• Preferenza del tema (chiaro/scuro) (prefers-color-scheme)
• Possibilità di interagire con l’hover (hover)

In pratica, puoi scrivere codice CSS dedicato a determinati tipi di dispositivo o dimensioni di schermo, garantendo che il tuo sito si adatti perfettamente.

Sintassi di Base

La sintassi più comune si basa su @media. Ecco un esempio generico:

@media (max-width: 768px) {
  /* Regole CSS per schermi con larghezza massima di 768px */
  body {
    background-color: lightblue;
  }
}

In questo modo, il colore di sfondo diventa lightblue solo se la larghezza dello schermo è minore o uguale a 768 pixel (tipicamente tablet e smartphone).

Breakpoint Consigliati

I breakpoint sono soglie di larghezza (o altezza) che utilizziamo per decidere quando cambiare layout. Non esistono regole fisse, ma alcuni valori sono molto diffusi:

• Mobile: max-width: 480px o max-width: 576px
• Tablet: min-width: 768px (fino a circa 1024px)
• Desktop: min-width: 1024px o 1200px in su

Un esempio di utilizzo:

/* Stili generali (Mobile First) */
body {
  font-size: 16px;
  margin: 0;
  padding: 0;
}

/* Tablet */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

Questa logica “Mobile First” prevede di scrivere prima i CSS per il mobile, e poi aggiungere media query per schermi più grandi. È una strategia consigliata perché garantisce un caricamento più rapido su dispositivi mobili e facilita la manutenzione.

Esempi Pratici

1. Adattare un Layout a 2 Colonne

Supponiamo di avere due sezioni (.sidebar e .content) che su schermo grande vogliamo mostrare affiancate, ma su mobile in colonna singola.

<div class="container">
  <div class="sidebar">
    <!-- Contenuti sidebar -->
  </div>
  <div class="content">
    <!-- Contenuti principali -->
  </div>
</div>

/* Stile di base: mobile */
.container {
  display: flex;
  flex-direction: column;
}

.sidebar {
  background-color: #fafafa;
}
.content {
  background-color: #ffffff;
}

/* Su schermi >= 768px, affianca sidebar e content */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
  
  .sidebar {
    flex: 1; /* la sidebar occupa 1 parte */
    max-width: 300px;
  }
  .content {
    flex: 2; /* il content occupa 2 parti */
  }
}

Come funziona:

• Inizialmente, con flex-direction: column, le due sezioni si dispongono verticalmente (ottimo per lo smartphone).
• Quando la larghezza dello schermo raggiunge i 768px o più, flex-direction: row affianca sidebar e contenuto principale.

2. Griglia di Immagini Responsive

Vuoi creare una griglia di immagini che cambia il numero di colonne in base allo schermo:

<div class="gallery">
  <img src="img1.jpg" alt="immagine 1">
  <img src="img2.jpg" alt="immagine 2">
  <img src="img3.jpg" alt="immagine 3">
  <img src="img4.jpg" alt="immagine 4">
</div>

.gallery {
  display: grid;
  grid-template-columns: 1fr; /* 1 colonna di default (mobile) */
  gap: 10px;
}

@media (min-width: 576px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr); /* 2 colonne su schermi >= 576px */
  }
}

@media (min-width: 992px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr); /* 3 colonne su schermi >= 992px */
  }
}

Come funziona:

• Sul dispositivo mobile la griglia ha 1 colonna.
• A partire da 576px (smartphone di fascia medio-alta o tablet in verticale), la griglia passa a 2 colonne.
• Da 992px in poi (tablet in orizzontale o desktop), le immagini vengono disposte su 3 colonne.

Media Features Avanzate

Oltre alla larghezza, puoi usare altre proprietà all’interno delle media query per gestire scenari più specifici:

1. OrientamentocssCopiaModifica@media (orientation: portrait) { /* Stili da applicare quando il dispositivo è in verticale */ } @media (orientation: landscape) { /* Stili per l’orientamento orizzontale */ }
2. Tema Chiaro/Scuro (Dark Mode)cssCopiaModifica@media (prefers-color-scheme: dark) { body { background-color: #333; color: #fff; } }
3. Hover e PuntatorecssCopiaModifica@media (hover: none) { /* Dispositivi touch, dove hover non esiste */ } @media (pointer: coarse) { /* Puntatori a bassa precisione, come le dita su smartphone/tablet */ }

Queste media features sono utilissime per migliorare l’accessibilità e l’usabilità del tuo sito web.

Errori Comuni e Best Practices

1. Usare troppi breakpoint: Definiscine pochi ma efficaci. Il rischio è avere CSS frammentato e difficile da gestire.
2. Dimenticare il contenuto dinamico: Testa sempre testi più lunghi, lingue diverse e immagini di dimensioni varie.
3. Non testare sui dispositivi reali: Usa strumenti di simulazione (Chrome DevTools, Safari Responsive Design Mode, ecc.), ma prova anche su dispositivi veri quando possibile.
4. Mobile First: Inizia progettando e scrivendo i CSS per lo schermo piccolo, poi fai gli adattamenti necessari per display più grandi.

Conclusioni

Le media query CSS sono uno strumento indispensabile per creare layout responsive e offrire un’ottima esperienza utente su qualsiasi dispositivo. Conoscere i principali breakpoint, le funzionalità più avanzate (come orientation e prefers-color-scheme) e seguire le best practices ti permetterà di realizzare siti web moderni, flessibili e facilmente gestibili.

Se vuoi approfondire ulteriormente, dai un’occhiata ai documenti ufficiali MDN sulle Media Query oppure esplora i numerosi tutorial online per sperimentare con esempi sempre più complessi.

Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.