Html – trasformare un sito responsive esempio



Trasformare un sito responsive esempio. In questa breve guida vedremo come trasformare un sito con layout fisso in un layout responsive.

In pratica quello che dobbiamo fare è impostare alcune regole CSS per far si che quando il browser apra una pagina su uno schermo al di sotto di una determinata risoluzione, ad esempio uno smartphone questo restituisca un’impaginazione diversa rispetto a quando la stessa pagina viene aperta su un PC desktop.

supponiamo di avere tre elementi affiancati, uno accanto ad un altro. In pratica 3 <div> consecutivi come nell’esempio seguente. Da notare che i 3 DIV presentano già delle classi al loro interno left, middle e right e vedremo dopo come utilizzarle.

<style>
* {
box-sizing:border-box;
}

.left {
float:left;
padding: 0px 20px 0px 0px;
width: 30%;
}

.right {
float:right;
padding: 0px 20px 0px 0px;
width: 70%;"
}

</style>


<div class="left">
colonna di sinistra
</div>


<div class="middle">
colonna centrale
</div>


<div class="right">
colonna centrale
</div>

 

Come trasformare un sito responsive esempio finale

Il risultato di quanto scritto sopra produce 3 box affiancati ma non scalabili tra loro. In pratica avremmo lo stesso risultato sia se la pagina verrà mostrata su uno smartphone che su un PC desktop.

Ora rendiamo il layout responsive aggiungendo poche righe di codice nella sezione dei CSS nei TAG STYLE


<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}

.left {
float:left;
padding: 0px 20px 0px 0px;
width: 30%;
}

.right {
float:right;
padding: 0px 20px 0px 0px;
width: 70%;"
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
.left, .right {
width:100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>

Come vediamo la variante che determina la trasformazione in un layout responsive è racchiusa dal codice
@media screen and (max-width:800px)
in altre parole se lo schermo che userà l’utente avrà una risoluzione in larghezza inferiore agli 800 pixel, le classi left, middle e right dovranno occupare il 100% della larghezza dell’intero schermo

il meta tag iniziale
<meta name=”viewport” …
è stato introdotto con HTML5 e rappresenta un metodo per consentire al web designer di prendere il controllo della finestra. È necessario includere il seguente TAG META in tutte le pagine web interessate.

l’elemento viewport dà le istruzioni del browser su come controllare le dimensioni e il ridimensionamento della pagina.

width=device-width imposta la larghezza della pagina per seguire la larghezza dello schermo sul dispositivo

initial-scale=1.0 imposta il livello di zoom iniziale quando la pagina viene caricata dal browser.

Questa soluzione è stata utilizzata su questo sito web per impaginare gli elementi degli archivi. Vedi un esempio qui
prova a ridimensionare la pagina dopo in caricamento.c

Rispondi

LAST WORLD NEWS 24 - logo

LAST WORLD NEWS 24

Notizie dai quotidiani mondiali in tempo reale
scaricala ora

%d blogger hanno fatto clic su Mi Piace per questo: