01 març El disseny responsiu d’Ethan Marcotte
Es difícil trobar un esquema senzill de com fer un disseny responsiu. Aquesta entrada serà una guía esquemàtica dels pasos a fer per tenir un disseny flexible segons el llibre “Responsive Web Design” d’Ethan Marcotte.
Tipografia
Quan indiquem:
body { font: normal 100% Helvetica, Arial, sans-serif; }
Li diem al navegador que el tamany de la font sigui el que té predefinit el navegador per defecte i aquest acostuma a ser 16px.
Si volem canviar el tamany d’un h1 podem escriure:
h1 { font-size: 24px; }
Quan volem fer un disseny responsiu hem d’expressar la tipografia en lletres escalables, amb el que utilitzarem la messura relativa “em”.
Per calcular el tamany en “em” d’una messura en píxels fem servir la fórmula:
destí / context = resultat
que traslladat al nostre h1 serà:
24px / 16 px = 1.5em
h1 { font-size: 1.5em /* 24px */; }
Quadrícula flexible
Aplicarem la mateixa fórmula a cada element de la nostra quadrícula, les mides de cada caixa seran relatives als elements que continguin.
Si tenim aquest esquema:
Escriurem el següent codi:
<div id="content">
<section>
<h1>Títol de la secció</h1>
<div class="main">
</div> <!-- End main -->
<div class="side">
</div> <!-- End side -->
</section>
</div> <!-- End content -->
Si la div #content volem que ocupi una amplada de 960px, escriurem “widht: 90%” .
#content { width:90% /* width:960px */ }
Encara que aquesta proporció és arbitrària s’ajusta a la majoria de navegadors i la div s’adaptarà sempre al 90% del tamany del navegador.
section { margin: 0 auto 53px; width: 900px; }
Aplicarem la fórmula destí / context = resultat
900 / 960 = 0.9375
Movem el decimal dos dígits a la dreta i obtindrem el percentatge en %:
section { margin: 0 auto 53px; width: 93.75%; }
I en el cas de les divs aniuades dins “section”:
main { float: left; width: 566px; }
side { float:right; widht: 331px; }
Dividirem cada mida pel context, que és “section”:
566 / 900 = .628888889
331 / 900 = .37777778
El resultat serà.
main { float: left; width: 62.8888889%; }
side { float:right; widht: 37.777778; }
Marges flexibles
Quan definim marges flexibles d’un element el context és l’amplada del container de l’element.
Paddin flexible
El context del padding flexible és l’amplada del mateix element.
Imatges flexibles
Una manera de dir-li a una imatge que no sigui més gran que el container que la conté és:
img { max-width: 100% }
Amb aquesta regla els navegadors actuals escalaran proporcionalment la imatge en relació al container que les contingui (i que tingui les seva mida expressada en percentatge).
Això ho podem aplicar també al vídeo i altres medias
img, embed, object, video { max-width: 100% }
Aquesta regla no s’aplica a Internet Explorer 6 on haurem de escriure width:100% i cridar una fulla d’estils específica per IE6.
Flexibles “Tiled background images”