Tutorial: creare un sito da zero – Parte 3

  • 0

Tutorial: creare un sito da zero – Parte 3

Category : Tutorial

Giunti a questo punto, se avete letto gli altri tutorial per creare un sito da zero abbiamo la struttura visibile regolarmente sui PC, adesso dobbiamo rendere responsivo il nostro sito.

Come si fa? le righe di codice da inserire sono pochissime e l’effetto è garantito! Recuperiamo il codice sorgente dell’esempio 2 per potere integrare alcune semplici righe di codice:

Nell’header dobbiamo inserire un metatag che comunica al browser che il nostro è un sito responsivo, quindi prima della chiusura del tag </head> inseriamo il seguente codice:

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

Ora non ci resta che dirgli come trasformare il sito quando la misura dello schermo cambia, possiamo decidere degli intervalli (min e max) e creare numerose visualizzazioni, noi per comodità creeremo una visualizzazione per PC e una per cellulari.

Il testo contenuto tra i tag <style></style> dice come il sito si presenta di default… adesso dobbiamo dirgli come deve presentarsi in caso di schermi più piccoli… per esempio fino a 600px di lunghezza. Per farlo inseriamo le seguenti righe di codice subito prima della chiusura del tag </style>

@media (max-width:600px ){
  .contenitore {
      width:98%; /* DO AL CONTENITORE LA DIMENSIONE MASSIMA ALSCIANDO UN MINIMO DI MARGINE DAI BORDI*/
      margin: 0 1%;
   }
   .menu, .contenuto{
      display:block; /* FACCIO IN MODO CHE I CAMPI CHE PRIMA ERANO AFFIANCATI ADESSO ESCANO UNO SOTTO L'ALTRO */
      width:98%; /* E CHE OVVIAMENTE SIANO GRANDI QUANTO TUTTO LO SCHERMO */
   }
}

Nota bene che all’interno del tag @media ho inserito solo le proprietà che cambiano così da alleggerire il codice, mentre per creare un intervallo, ad esempio una particolare visualizzazione per tablet, avrei potuto scrivere il tag @media in questo modo:

@media (min-width:280px) and (max-width:600px )

Al seguente link potete trovare un esempio funzionante, per vederne il funzionamento puoi ridimensionare la finestra del browser oppure aprire questo articolo sia da PC che da smartphone.

Buona programmazione…. nel prossimo tutorial inseriremo immagini responsive!!!


Acquista il mio ebook

Contattaci su Facebook