• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Guida Definire i breakpoint con le media queries

Cicc_z

Utente Assiduo
Autore del topic
27 Febbraio 2009
643
87
Miglior risposta
0
Nella fase iniziale del progetto, contestualmente al lavoro sui contenuti, è opportuno fissare e definire i cosiddetti breakpoint.

Un breakpoint è un punto, su una linea ideale che parte da 0, in cui si verifica una qualche modifica (tramite i CSS) al layout della pagina. I breakpoint si definiscono con valori numerici e unità di misura nel contesto delle media queries inserite nei nostri fogli di stili CSS.

Sembra complicato? Chiariamo con un’immagine e un esempio:
breakpoints_500.png

Sto progettando una pagina e imposto il rosso come colore di sfondo predefinito. Quando la finestra del browser raggiunge la dimensione di 480px in larghezza, il colore di sfondo diventa giallo, e giallo rimane fino a quando la larghezza non supera i 768px (lo sfondo diventa verde). A 1024px ho creato un altro breakpoint: a quel punto lo sfondo diventa blue. Un ultimo breakpoint a 1200px: da quella dimensione in poi lo sfondo sarà grigio.
Ecco l'esempio:
Perfavore, Entra oppure Registrati per vedere i Link!
(provate a restringere la finestra del vostro browser).

Come si traduce tutto ciò in codice? Così:
Codice:
Perfavore, Entra oppure Registrati per vedere i codici!
Ad ogni breakpoint corrisponde una media query. Nella media query ho scritto di applicare le regole che contiene solo sullo schermo (screen) e quando la larghezza minima della finestra del browser (min-width) è pari ad un valore specifico (480px, 768px, etc.). Per approfondire il funzionamento delle media queries potete consultare le due lezioni ad esse dedicate nella Guida CSS3:
Perfavore, Entra oppure Registrati per vedere i Link!

Perfavore, Entra oppure Registrati per vedere i Link!

Questo è il meccanismo cruciale nel responsive design. Tornando alla metafora del sistema di riscaldamento, possiamo dire che i breakpoint e le media queries a cui sono associati corrispondono alle istruzioni che diamo al termostato (“Se la temperatura della casa arriva a 12°, accendi l’impianto; quando tocca i 22° spegni”).

Ma quanti breakpoint è opportuno/necessario creare? Questo dipende dalle caratteristiche del sito, dal suo layout, dalle tecniche che decidiamo di implementare per adattare il layout stesso ai vari dispositivi e alle dimensioni dei loro schermi, etc. In buona sostanza, alla domanda di prima potremmo così rispondere: “Quanti ne servono!”. Ovvero quanti ne servono perché una pagina si adatti al meglio alle caratteristiche del dispositivo con cui viene visualizzata.

Breakpoint in base ai dispositivi
La pratica oggi prevalente tende a fissare i breakpoint sulla base delle dimensioni dello schermo (o della finestra del browser) delle principali tipologie di device:

Smartphone (con orientamento portrait o landscape)
Tablet (con orientamento portrait o landscape)
Netbook
PC desktop con monitor ad alta o altissima risoluzione
Traducendo questo schema in numeri, poi, si può verificare come per le categorie smartphone e tablet le dimensioni ‘standard’ prevalentemente adottate corrispondano a quelle dell’iPhone e dell’iPad:

320px: iPhone con orientamento portrait
480px: iPhone con orientamento landscape
768px: iPad con orientamento portrait
1024px: iPad con orientamento landscape (ma anche netbook, visto che in genere questi dispositivi hanno una risoluzione orizzontale di 1024px)
Si potrà obiettare che non tutti gli smartphone e i tablet sono iPhone e iPad. Vero, ma in questo caso le dimensioni dello schermo dei device di Apple servono più che altro come punto di riferimento rispetto ad una categoria di dispositivi; la scelta non implica necessariamente di creare una pagina ‘ottimizzata per iPhone o iPad’ a discapito di altri device.

Creare, del resto, un breakpoint per ogni dispositivo sarebbe francamente assurdo. Per capire a cosa si andrebbe incontro basta una visita sul sito Phone Size, un eccellente servizio con cui è possibile comparare le dimensioni dei principali smartphone presenti sul mercato. L’importante è testare il sito sin dall’inizio, controllare se tutto è in ordine in corrispondenza dei breakpoint che definiamo e, quando verifichiamo la presenza di macroscopici problemi, correggere, anche adeguando i breakpoint eventualmente.
Andy Clarke ha di recente proposto questo schema in una sua
Perfavore, Entra oppure Registrati per vedere i Link!

clarke_breakpoints_th.png

Si suggerisce la definizione di un set di breakpoint principali, accompagnato eventualmente da breakpoint secondari per adattare il documento a specifici dispositivi.

Breakpoint in base al contenuto
Un approccio alternativo prevede di impostare i breakpoint non in base ai device, ma ai contenuti.

L’approccio può essere così schematizzato in uno scenario molto semplificato:

imposto la dimensione del font principale a 12px;
facendo dei test verifico che quando la larghezza del browser arriva intorno ai 600px, il testo è troppo piccolo;
a quel punto creo un breakpoint a 600px e aumento la dimensione del testo a 14px.
In questo caso il breakpoint prescinde da uno specifico device o da una specifica tipologia di device, e non è raro vedere adottati come unità di misura gli em invece che i pixel.

FONTE: HTML