Responsive design con i CSS

Ecco un breve tutorial che introduce allo sviluppo di siti web con responsive design, ovvero un design che si adatta automaticamente alle dimensioni delle schermo del dispositivo, sia esso un pc desktop, un tablet o uno spmatphone!

Mobile First

Ci sono diversi sistemi per creare siti web adatti ad ogni dispositivo, in questa guida andremo a vedere l’approccio chiamato “Mobile Frist” che sfrutta unicamente i CSS.

In pratica questo medoto consiste nello sviluppare in un unico foglio di style CSS, prima le regole generali che andranno utilizzate quando si visualizza il sito web con uno smartphone, e grazie alle media queries impostate nei vari breakpoint andando via via ad ottimizzare le regole CSS anche per gli altri dispositivi.

Metatag viewport

Per prima cosa bisogna inserire nel documento HTML il seguente metatag che dice al browser del dispositivo di adattarsi in base alla larghezza dello schermo stesso:

<meta name="viewport" content="width=device-width">

Breakpoint

Il passo successivo per creare un Responsive Layout con i CSS è quello di definire i breakpoint adatti ai vari schermo/dispositivi. Vediamo quindi quali sono i breakpoint più utilizzati:

  1. 320px: Smartphone con orientamento portrait (verticale)
  2. 480px: Smartphone con orientamento landscape (orizzontale)
  3. 768px: Tablet con orientamento portrait (verticale)
  4. 1024px: Netbook e Tablet con orientamento landscape (orizzontale)
  5. PC Desktop e notebook

Le Media Queries

Le Media Queries sono le istruzioni da inserire nel foglio CSS che dicono al browser di utilizzare le istruzioni contenute in ognuna di esse in base alla larghezza dello schermo.

Provando l’esempio indicato sotto infatti basta ingrandire e rimpicciolire la finestra del browser per vedere il colore di sfondo cambiare in base alla larghezza del browser.

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;
 }
}

Per approfondimenti sul Resposive Design consiglio questa guida di HTML.it

Hai delle idee o dei suggerimenti per migliorare questo articolo? Lascia un commento qui sotto!

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website