Oggi scopriremo come creare una pagina responsive, ovvero una pagina che si veda bene su tutti i nostri dispositivi (computer, tablet e smartphone). Con l’esempio di oggi vi voglio mostrare come una pagina web si possa visualizzare in modi differenti a seconda del dispositivo che stai utilizzando.

Ho voluto creare una pagina web costituita da una foto e del testo ed, inoltre, ho fatto in modo tale che sul computer si potesse visualizzare con la seguente struttura.

pc

Sul tablet (dato che lo schermo è più piccolo e lo spazio per i singoli elementi si riduce) ho fatto in modo che si vedesse così:

i-pad

Sullo smartphone ho invece scelto di nascondere l’immagine dato che avremo uno schermo ancora più ridotto.

i-phone

Per semplicità comincerò a scrivere tre codici css per i tre dispositivi: uno per il computer, uno per il tablet e l’altro per lo smartphone.

Attenzione: il codice html sarà sempre lo stesso e pertanto non verrà modificato.

Partiamo con il codice css del computer:


1

Vediamo ora quello del tablet:


1

Infine, il codice css dello smartphone:


1

Quello che vogliamo fare è di unire questi tre codici css in un unico file css e fare in modo tale che a seconda della dimensione dello schermo il browser in automatico selezioni il css corretto!

Qui di seguito vi mostro il file css con i tre codici:


1

Da come potete vedere dal codice, ho utilizzato una “formulina magica”:

@media screen and (min-width: 401px) and (max-width: 800px) {
 }

Questa formula si chiama media query ed è una dichiarazione di un tipo di media (nel nostro caso screen, monitor); tuttavia è possibile utilizzare anche altre opzioni, come ad esempio:

  • @media all (tutti i dispositivi): in questa caso la dichiarazione farà riferimento a tutti i tipi di dispositivo (monitor, stampanti, tv); inoltre, rappresenterebbe il valore di default qualora non dovessimo scrivere nulla nella dichiarazione.
  • @media print: la dichiarazione si applicherà solamente in riferimento alle stampanti. Nel momento in cui si andrà a selezionare l’anteprima di stampa visualizzeremo come la pagina verrà stampata in base alla dichiarazione che abbiamo scritto. Ad esempio, poniamo di trovarci in un sito web con sfondo nero e che vogliamo stampare una pagina di nostro interesse (ma senza lo sfondo nero, altrimenti consumeremmo tutto l’inchiostro)! Grazie a media print è possibile impostare che le stampe non dovranno avere lo sfondo nero e così via.

Ora, andiamo a scoprire più in dettaglio la struttura della media query.

All’interno delle parentesi tonde andremo a scrivere le condizioni (minwidth) e (maxwidth) le quali definiscono la lunghezza minima e massima del display (a seconda che si tratti di un pc, di un tablet o di uno smartphone).

Analizziamo ad esempio la media query del tablet:

@media screen and (min-width: 401px) and (max-width: 800px) {
 .top {
 height: 60px;
 background-color: #B578BC;
 }
 img {
 max-width: 100%;
 }
 .footer {
 height: 150px;
 background-color: #AF2BBF;
 margin-bottom: 0;
 padding: 0;
 }
 }

All’interno delle parentesi graffe andremo a scrivere i selettori e le classi che ci interessano, per cui la prima riga comunicherà al browser che dovrà utilizzare le caratteristiche delle classi top, footer e del selettore img solo se la dimensione dello schermo avrà una risoluzione minima di 401 px e massima di 800px.

In questo modo potremo dire che la nostra pagina web è responsive! 🙂

Nei prossimi articoli torneremo ancora sul questo topic fondamentale nel mondo del web design.

 

 




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.