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*/
}