Pillole CSS: come adattare la pagina web a vari viewport (desktop, smartphone, …)

Il responsive web design è l’arte di disegnare pagine web visibili da tutti i tipi di viewport, cioè di dispositivi: dal browser su computer desktop, al notebook, al tablet e allo smartphone.

Ne abbiamo già parlato qui.

Fondamentalmente si tratta di saper usare i fogli di stile (CSS) che, essendo “cascading” vengono applicati a cascata per cui la stessa regola presente in vari fogli di stile viene resa dal browser come uguale a quella letta nell’ultimo foglio di stile.

Il problema della decisione del tipo di dispositivo (e della sua orientazione) si risolve con lo strumento delle media queries: una grammatica che ci permette di istruire il browser su quali fogli di regole deve caricare a seconda del risultato di queste interrogazioni.

Prendo spunto da questo sito.

Prendiamo ad esempio queste istruzioni di importazione che si trovano nelle intestazioni delle pagine html:

    <link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
    <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
    <link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
    <link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

In sostanza il browser adotta il foglio di stile max-640px.css se la pagina è stata caricata in un dispositivo piccolino (uno smartphone), oppure caricherà il foglio min-640px.css se il viewport è più comodo (ad esempio un computer desktop o laptop).

Inoltre il browser sceglie al volo il foglio portrait.css (disposizione tipo “ritratto”) o landscape.css (disposizione tipo “paesaggio”) a seconda di come ruotiamo lo smartphone o il tablet, oppure se ridimensioniamo il browser in una finestra stretta e alta.

I diversi fogli di stile contengono regole diverse per gli stessi oggetti; per esempio ne l mio caso avevo un layout a tre colonne che si poteva visualizzare solo su uno schermo grande; per gli schermi piccoli mando a capo una sotto l’altra le tre colonne.

Versione per desktop

Versione per smartphone