Responsive design

Ingrandisci il Font ingrandisci font | Riduci il Font riduci font | stampa documentosalva documento in pdf

Come responsivizzare un layout fisso e farlo diventare responsive? 

Innanzitutto iniziamo ad inserire nella Head del vostro sito il Meta tag: "viewport", che indica al browser come  adattarsi alle risoluzioni dei vari device.

Esso và scritto in questa maniera:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esso fornisce a browser le istruzioni su come addattare dimensioni e le varie porzioni delle vostre pagine web alle varie risoluzioni dello schermo. 

Poi dovrete avere delle griglie fluide. Larghezza e lunghezza delle varie parti del vostro layout: header, menù di navigazione, content, sidebar, footer, vanno espresse in percentuale e non in pixel. Perchè i valori espressi in "percentuale" sono fluidi e  si adattano al variare della risoluzione dello schermo, invece il pixel è un'unità di misura fissa. 

Esempio di layout fluido:

 body {
 width: 100%; /*larghezza body*/
 max-width: 1300px;  /*larghezza massima body, per evitare che si allarghi troppo su monitor grandi*/
 min-width: 200px;   /*larghezza minima body*/
 margin: auto;
 background: #333;
 color: #fff;
 background-size:cover;
 background-attachment:fixed;
 background-image: url("images/sfondo.jpg"); /*l'immagine di sfondo di può omettere*/
 background-position: center center; 
 background-repeat: no-repeat;
 font-family: 'Open Sans', sans-serif;
 
 }
 
 
 #headerwrap { /*Main container, con sfondo semitrasparente, contenete le foto*/  
       display: block; 
        margin: auto;
        }

 #header { /*Main container*/
       width: 1076px;
       max-width: 100%;
       height: 500px;
       display: block; /* stringa per centrare display e margin*/
       margin:  auto;
       background:#1b0ed4; /*sfondo blue*/
            
			 }

/*sringhe aggiunte da Giovanna per il container del testo*/
#contentwrap { /*Main container, per scritta articoli*/  
       width: 1076px;
       max-width: 100%;
       display: block; /* stringa per centrare display e margin*/
       margin: 15px auto;
       padding: 10 10 10px;
        }

#content { /*Main container*/
    background: #ffffff; 
    color: #000000; 
    padding: 20px;              
        }

#footertwrap { /*Main container, per scritta articoli*/  
       width: 1076px;
       max-width: 100%;
       display: block; /* stringa per centrare display e margin*/
       margin: 15px auto;
       padding: 10 10 10px;
        }

#footer { /*Main container*/
    background: green; 
    color: #ffffff; 
    padding: 20px;              
        }

/*Per rendere invisibile un elemento all'occhio umano ma funzionante lo stesso*/

.invisibile {
 display: none;
}

/*oppure*/
.invisibile {
position: absolute;
left: -9999px;
}

 img {  /*imagini flessibili ed adattabili alle varie risoluzioni dello schermo*/
 max-width: 100%;
 } 

iframe {  /*imagini flessibili ed adattabili alle varie risoluzioni dello schermo*/
 max-width: 100%;
 height: auto;
 }



 
/*Media query per Responsive Design adattabile ai vari devise e risoluzioni dello schermo*/

@media only screen and (max-width : 480px) {
   /* Smartphone vista: una colonna */
   
    .boxarticoli {
      width: 100%;
      padding-bottom: 100%;
   }
   
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet vista: 2 colonne */
   
     .boxarticoli {
      width: 50%;
      padding-bottom: 50%;
   }
 
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad vista: 3 colonne */
   
   .boxarticoli {
      width: 33.3%;
      padding-bottom: 33.3%;
   }
   
}


@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 colonne */
   
   .boxarticoli {
      width: 25%;
      padding-bottom: 25%;
   }
   
}