- Learn
- Guida Layout dei siti con i CSS
- Layout elastico
Layout elastico
Il layout elastico usa il dimensionamento in em non solo per il testo ma anche per la larghezza degli elementi principali della pagina, cosicchè solo ridimensionando il carattere del browser è possibile agire sulla larghezza della pagina, ottenendo una sorta di effetto “zoom”. Credo che l’idea di un layout elastico sia abbastanza recente, a me è capitato per la prima volta di vederlo presentato su questo sito.
Vediamo brevemente come ottenere un layout elastico. Per prima cosa, si dimensione il font-size del body con una misura relativa di modo che sia possibile ridimensionare il font tramite le opzioni del browser. Una misura percentuale accettabile universalmente è stata suggerita, in un articolo ormai diventato “storico”, da Owen Briggs: Sane css typography ed è 76%. Questa percentuale empirica dice al browser: metti il font-size al 76% della tua misura di default (con un font size del 76% e un carattere medio impostato via browser, il risultato è all’ incirca pari a 12 pixels).
A questo punto si dimensiona il container principale, e le sue eventuali colonne, solo in em, consentendo così, reimpostando le dimensioni del carattere del browser, di avere un effetto zoom. Vediamo il css base di un layout elastico e centrato:
body{
font-size: 76%; /*dimensionamento percentuale del font */
text-align: center; /*centra in IE 5.x */
}
div#container{
width: 60em; /*dimensionamento in em del container principale */
margin: 0px auto; /*centra negli altri browsers*/
text-align: left; /*ripristina l’ allineamento*/
}
Se vuoi aggiornamenti su Layout elastico inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Intervista a Mario Viviani, il primo GDE (Google Developer Expert) per Android italiano
Mario Viviani è il primo GDE (Google Developer Expert) per Android italiano. Ci racconta la sua esperienza di publisher di […]