Premessa

In un precedente articolo di questo blog (Introduzione al design reattivo – https://lnx.instantwebsites.it/iwblog/?p=1272) abbiamo introdotto alcuni principi di base del design “reattivo” o “adattivo“.

Per approfondire il discorso, vediamo ora alcuni esempi di Media Query che consentono di subordinare l’applicazione di determinate dichiarazioni (proprietà e relativi valori), all’interno del foglio di stile, alla ricorrenza di condizioni prefissate concernenti la risoluzione video del dispositivo su cui il sito viene visualizzato e/o l’orientamento dello schermo.

Rammentiamo innanzitutto che nella sezione head della pagina occorre inserire quanto segue:

<meta name=”viewport” content=”width=device-width” />

per fare sì che il riferimento sia la risoluzione “reale” del dispositivo (dimensione della viewport) prevenendo lo zoom automatico della pagina che quest’ultimo effettuerebbe per visualizzarla interamente.

E’ anche opportuno impedire che l’utente possa materialmente effettuare lo zoom stesso, completando quanto sopra nel modo seguente:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />

oppure, in modo equivalente:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no” />

Rammentiamo inoltre che per impostare le media query ci sono due modi:

1) creare diversi fogli di stile ed eseguirli a seconda del dispositivo impostando le condizioni nella sezione head (Media Feature), come nell’esempio seguente:

<!– foglio di stile comune a tutti i supporti –>
<link href=”css/common.css” rel=”stylesheet” media=”screen” />

<!– media feature compatibili con tutti gli schermi –>
<link href=”css/smartphone.css” rel=”stylesheet” media=”only screen and (max-width: 480px)” />
<link href=”css/tablet.css” rel=”stylesheet” media=”only screen and (min-width: 481px) and (max-width: 767px)” />
…

2) utilizzare un singolo foglio di stile, inserire le regole comuni, poi quelle specifiche impiegando, appunto, le Media Query come negli esempi che seguono.

Esempi di Media Query: larghezza della viewport

Proprietà applicate se la larghezza massima dello schermo è 768px:

@media (max-width: 768px) {
…
}

Proprietà applicate se la larghezza minima dello schermo è 480px:

@media (min-width: 480px) {
…
}

Proprietà applicate se la larghezza dello schermo è compresa tra 480 e 768px:

@media (min-width: 480px) and (max-width: 768px) {
…
}

Proprietà applicate se la larghezza dello schermo è inferiore a 480px oppure superiore a 768px:

@media (max-width: 480px), (min-width: 768px) {
…
}

Si noti dunque che mentre la ricorrenza simultanea di due o più condizioni è espressa dal connettivo logico and della logica booleana, qualora si voglia esprimere la ricorrenza di una o dell’altra – nel senso del connettivo logico booleano or e di quello latino vel – bisogna inserire una virgola.

Esempi di Media Query: altezza della viewport

E’ possibile esprimere le Media Query facendo riferimento all’altezza della viewport, invece che alla sua larghezza, in modo analogo a quanto visto sopra usando min-height e max-height.

Esempi di Media Query: orientamento dello schermo

Come nelle immagini sottoriportate, lo schermo di un dispositivo può essere orientato in due modi: landscape (a sinistra) o portrait (a destra):

Dal momento che la risoluzione orizzontale e quella verticale sono, ovviamente, differenti, è possibile impostare le Media Query per fare riferimento all’orientamento del dispositivo, creando dunque delle visualizzazioni ottimizzate.

Per esempio:

@media (max-width: 800px) and (orientation: portrait) {
…
}

Come impostare i breakpoint

Una questione fondamentale, nel creare le Media Query, è quella di individuare e fissare i corretti breakpoint, vale a dire i valori di risoluzione minima e massima (tipicamente orizzontale) in corrispondenza dei quali applicare le diverse regole.

Consideriamo la risoluzione video di alcuni dispositivi maggiormente diffusi, nelle loro successive versioni:

iPhone 3: 480×320 @163dpi
iPhone 4: 960×640 @ 326dpi
iPhone 5: 1136×640 @ 326dpi
iPad: 1024×768 @ 132dpi
iPad 2: 1024×768 @ 132dpi
iPad (vers. succ.): 2048×1536 @ 264/326dpi
iPad mini: 1024×768 (min.) @ 163dpi
…

Appare dunque corretto affermare che i valori di breakpoint più utili sono: 320px / 480px / 768px / 1024px mentre, per le risoluzioni superiori, difficilmente si rivelerà utile impostare regole specifiche di visualizzazione, a meno che il layout non sia particolarmente “esigente” in termini di spazio (ad esempio, un layout liquido al 100% con numerose colonne).