Definire i breakpoint con le css media queries

Durante la progettazione di un template Responsive, una delle prime fasi consta nella definizione dei breakpoint con le css media queries.

Con un breakpoint definiamo un punto su una linea ideale che parte da 0, in cui deve avvenire una sorta di modifica (tramite CSS) al layout della pagina. Ogni breakpoint è identificato nei nostri fogli di stili CSS, da valori numerici e unità di misura.

Ipotizziamo di voler creare una pagina web, che cambia colore di sfondo, in base alla dimensione dello schermo del dispositivo che la richiede.

Definizione dei breakpoint
Definizione dei breakpoint

Impostiamo i break point, a queste dimensioni:

  • 480px;
  • 768px;
  • 1024px;
  • 1200px.

 

Per ognuno definiamo quindi i colori di background:

  • default => rosso;
  • 480px <= larghezza < 768px => arancione;
  • 768px <= larghezza < 1024px => giallo;
  • 1024px <= larghezza < 1200px => verde;
  • maggiore di 1200px => blu

Codice:


body {
background: red;
}

@media screen and (min-width: 480px) {
body {
background: yellow;
}
}

@media screen and (min-width: 768px) {
body {
background: green;
}
}

@media screen and (min-width: 1024px) {
body {
background: blue;
}
}

@media screen and (min-width: 1200px) {
body {
background: gray;
}
}

 

Come è possibile notare, ad ogni breakpoint corrisponde una media query. Ognuna viene chiamata in causa quando lo schermo (screen) e la larghezza minima della finestra del browser (min-width) è pari ad un valore specifico (480px, 768px, etc.).

 

Ecco quindi definito il meccanismo base attraverso il quale prende vita il responsive design.

 

La dimensione dello schermo non è comunque l’unico fattore che rende Responsive un layout. E’ possibile infatti definire breakpoint anche in base al contenuto, analizzando per esempio la lingua adottata, e definendo per ognuna un layout diverso ( utile ad esempio per i siti web internazionali).

Secondo Robert Bringhurst, “Qualsiasi linea lunga tra i 45 e 75 caratteri, è ampiamente considerata soddisfacente per una pagina a colonna singola…..” Josef Müller-Brockmann invece scrive che, “Una colonna è facile da leggere se è abbastanza larga per una media di 10 parole per linea. Ogni volta che la larghezza del contenuto principale diventa tale per cui ogni linea contiene più di 75 caratteri o 10 parole, qualcosa deve accadere, agendo quindi ad esempio sulla grandezza del font.

 

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.