WILFREDO SALAS G. - Responsive Web Design - Webuda

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