Las unidades de medida son algo que viene de CSS, tienen que ver con el lenguaje de las hojas de estilo y no especialmente con las técnicas englobadas en "responsive". Por tanto, ya han sido objeto de estudio en otros artículos de DesarrolloWeb.com. Si quieres saber lo básico conviene leer el artículo de unidades de medida CSS http://www.desarrolloweb.com/articulos/185.php si no sabéis a qué nos referimos.

Sin embargo en Responsive Web Design debemos usar unidades de medida con mayor cuidado, si cabe, para sacar lo mejor de cada una. Quizás habéis escuchado que en líneas generales se debe intentar usar unidades de medida relativas y, aunque es cierto en muchas circunstancias, no siempre es correcto ni por tanto lo más adecuado.

Las unidades tienen diversas características que debemos conocer, para usarlas con criterio y escoger las más adecuadas en cada caso. De eso es lo que trata este artículo. Además, también queremos actualizar la información de DesarrolloWeb.com, puesto que en los últimos años han aparecido nuevas unidades, en nuevas especificaciones de CSS, de las que no hemos hablado en artículos.

Medidas fijas y medidas relativas

Lo primero que tenemos que saber distinguir es entre unidades relativas y unidades fijas. Por si acaso, vamos a describirlas y constatar cuáles son las unidades CSS más habituales de cada tipo.

Unidades fijas:

Son aquellas que especifican una medida en términos absolutos, sin tener en cuenta el contexto donde se están aplicando. Por ejemplo 300px (300 píxeles) es algo bastante fijo, que tendrá un valor independientemente de dónde se haya definido. 300px son siempre eso, 300px, independientemente de si tu contenedor tiene una anchura de 2000px o de 500px.

Las siguientes unidades son unidades fijas:

px: Píxeles
in: Pulgadas (1 in es igual a 96px)
pt: Puntos (1 pt es igual a 1/72 in)
cm: Centímetros
mm: Milímetros
pc: Picas

Unidades relativas:

Las unidades relativas de CSS son aquellas que tienen en cuenta el contexto donde se encuentran. Son relativas a las dimensiones del contenedor donde se han definido. Por ejemplo %, es una unidad relativa, puesto que 30% de ancho no será lo mismo para un elemento situado dentro de un contenedor de 2000px de anchura o sobre un contenedor de 1000px de anchura.

%: porcentaje
em: Altura de la fuente
rem: Root-em
vw: Viewport width
vh: Viewport Height
vmin: Viewport menor, entre altura o anchura
vmax: Viewport mayor, entre altura o anchura
ex: anchura de la fuente para la letra "x"
ch: la anchura del carácter "0" (cero)

Unidades relativas ¿a qué?

Si sabes la respuesta o al menos te has hecho esa pregunta te puedes dar por satisfecho pues es una buena reflexión. Cada unidad puede ser relativa a una cosa distinta, o incluso medidas como el porcentaje pueden ser relativas a varias cosas.

El porcentaje es relativo a la propia medida heredada. Por ejemplo, si estamos definiendo tamaños de fuentes y decimos que es 150%, entonces esa medida es relativa al propio tamaño de la fuente del elemento que hereda del contenedor (una vez y media el tamaño de la fuente que habría en el elemento antes de aplicarle el estilo). Pero la misma unidad de porcentaje, aplicada a la propiedad width de una caja será relativa al tamaño del contenedor en su anchura.

Por su parte, la unidad em es relativa al tamaño del texto del contenedor donde está aquel elemento donde se le aplica esa unidad. Y siempre es relativo al tamaño del texto, aunque se aplique en una propiedad como width que afecta a la anchura del elemento.

Por ejemplo, si definimos que un texto sea 2em para calcular el tamaño efectivo habrá que saber cuál es el tamaño del texto en el contenedor y multiplicarlo por dos. Igualmente, si estamos definiendo una anchura y le asignamos 10em, para calcular la anchura efectiva en píxeles tendremos que saber cuál es el tamaño de la fuente del contenedor.

Por ejemplo, tenemos un elemento DIV que es hijo directo de BODY. Si no se ha modificado el tamaño del texto del BODY es equivalente a 16px. Si ese DIV tiene un width de 10em, la anchura efectiva de elemento será de 10 x 16 píxeles = 160px.

Lo interesante aquí es que, para el caso de las dimensiones de los elementos, podemos especificar las anchuras o alturas relativas tanto en em como en %. Si usas em serán relativas al tamaño de texto y si usas % serán relativas al tamaño del contenedor, llegando a fórmulas distintas:

Valor % = ( dimensión objetivo / dimensión del contenedor ) x 100
Valor em = ( dimensión objetivo / fuente contenedor )

Dicho con palabras:
Si quieres que un elemento tenga 200 píxeles de ancho y las dimensiones del contenedor en un momento dado son de 1000 píxeles, el valor en % será de 200/1000 = 0.2 * 100 = 20%

Si quieres que un elemento tenga 200 píxeles y el tamaño de la fuente en su contenedor es de 16 píxeles, en em tendrías que darle el valor 200 / 16 = 12.5em

Las fórmulas es solo cuestión de aplicarlas, lo importante que deberías quedarte en este punto es que, dependiendo de la unidad, éstas son relativas a unas cosas y a veces a otras. ¿Cuál usar? La que te venga bien. Generalmente para anchuras relativas de elementos te será más fácil distribuir los espacios usando %, pero quieres tener un elemento que tenga altura aproximada del texto, puedes usar em. Por ejemplo, un span que sea un poco más alto que el texto que tiene dentro.

A continuación tienes un cuadro resumen de las unidades relativas, con respecto a la medida a la que son relativas.
%: Porcentaje, puede ser relativo frente a varios elementos, si trabajamos con fuentes es relativo a la fuente, pero si lo aplicamos a width es relativo a la anchura del contenedor, por poner dos ejemplos.

em: Relativa al tamaño de la fuente del elemento actual
rem: Relativa al tamaño de la fuente del elemento raíz (HTML)
vw: Viewport Width, relativa al tamaño del viewport, sería el 1% de la anchura del viewport
vh: Viewport Height, relativa al tamaño del viewport, sería el 1% de la altura del viewport
vmin: Relativa al tamaño del viewport, el valor mínimo entre su altura y altura
vmax: Relativa al tamaño del viewport, el valor máximo entre su altura y altura
ex: Relativa a la fuente definida en el contenedor, tamaño de la letra "x" en la anchura
ch: Relativa a la fuente, igual que ex pero con la anchura del caracter 0 (cero)

En el siguiente artículo seguiremos hablando de unidades de medida, explicando algunas unidades no tan usadas y valorando la conveniencia de las unidades relativas y absolutas en diversas situaciones.