WILFREDO SALAS G. - Responsive Web Design - Webuda
WILFREDO SALAS G. - Responsive Web Design - Webuda
WILFREDO SALAS G. - Responsive Web Design - Webuda
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
Ahora sí que se ve «bonito» y agradable a la vida. Analicemos rápidamente lo que vieron: la etiqueta<br />
contiene tres etiquetas de títulos (, , ) y cada una tiene un tipo de fuente<br />
específica (font-family), pero tienen un tamaño rígido (font-size) al medirlos a través de pixeles. No<br />
tiene nada de malo eso, pero para el propósito de una página web fluida, es indispensable cambiarlos<br />
por valores flexibles. Entonces, en vez de px usaremos em.<br />
FLEXIBILIZANDO EL CONTEXTO<br />
Para hacer esto, se tiene que crear el siguiente ejercicio matemático: se toma el tamaño de la fuente y se<br />
divide por el font-size del elemento que lo contenga — en otras palabras, su contexto. El resultado será<br />
que nuestra fuente quedará en un valor em fluido, en vez de px.<br />
En otras palabras, las tipos relativas pueden ser calculadas con la siguiente fórmula:<br />
Objetivo ÷ Contexto = Resultado<br />
Con esta fórmula, ahora podemos calcular el tamaño de nuestras etiquetas , y , que<br />
están dentro del .<br />
Asumiendo que nuestro font-size de base sea de un 100%, nuestro número de contexto será de 16px.<br />
Ahora, se tiene que tomar el tamaño que se usó en primer lugar para las etiquetas ( en este caso) y<br />
dividirlo por su contexto (16px), quedando esto:<br />
70 ÷ 16 = 4.5<br />
Entonces, con esto decimos que 70 es 4.5 veces mayor que 16, o sea, nuestro font-size para es<br />
de 4.5em. Después de eso usamos la misma fórmula para las otras dos etiquetas que faltan, para que<br />
queden:<br />
24 ÷ 16 = 1.5<br />
16 ÷ 16 = 1<br />
Gracias a esto se sabe que el font-size de es de 1.5em y el de de 1em. Con estos cálculos<br />
ya listos se va al CSS y quedan de la siguiente forma:<br />
#titulo h1{<br />
}<br />
font-family:helvetica_med_con, helvetica, sans-serif;<br />
font-size:4.5em; /* 70px / 16px */<br />
margin-top:40px;<br />
margin-bottom:0;<br />
12 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible