En el anterior capítulo del Manual de Responsive Web Design estuvimos haciendo una primera aproximación a las unidades de medida de CSS y explicando los grandes grupos de unidades, que serían las unidades de medida relativas y absolutas.

Este texto viene a continuar con lo que veníamos hablando, haciendo un especial hincapié en explicar unidades de medida no tan utilizadas en la actualidad, pero que tienen un comportamiento muy adecuado para los sitios adaptables.

Comenzaremos ofreciendo una explicación sobre las unidades"em", "rem", así como "vw" y "vh".

Unidades "em"

En el artículo anterior ya explicamos muchas cosas sobre esta una unidad de medida CSS, así que no nos vamos a repetir. Solo recordar que em corresponde con la medida actual de la fuente en un contenedor. Por ejemplo, si has modificado el tamaño de la fuente en un elemento y le has asignado font-size: 20px, entonces dentro de ese contenedor (y sus hijos si no redefinimos ese tamaño, 1em será igual a 20px.

Además comentamos que el tamaño de fuente predeterminado en el navegador es usualmente de 16px, por lo que, si no lo has alterado en algún lugar de tu CSS, 1em equivale a 16px. Pero ojo, tómalo solo como una referencia, ya que ese tamaño definido por defecto es algo propio del navegador y que podría cambiar entre marcas de navegadores, versiones, modelos, sistemas operativos o configuraciones del usuario.

Unidades "rem"

Ahora que has entendido "em", puedes entender la unidad "rem", que es relativa al tamaño de la fuente como em, pero en este caso tiene en cuenta el tamaño de la fuente del elemento HTML y no la heredada o definida en el elemento donde se encuentre aquello cuyas dimensiones estás definiendo.

El problema de rem es la compatibilidad con navegadores antiguos, IE8 o anteriores, puesto que es una unidad definida en nuevas versiones de CSS. Por ese motivo, si quieres usar rem y asegurar la compatibilidad hacia atrás, deberías definir primero las medidas en cualquier unidad compatible con todos los navegadores, como px o em y luego definir las medidas con rem.

La unidad rem es una excelente manera de definir tamaños de fuentes, pues suele ser mucho más fácil de organizar y te evita sorpresas o dudas habituales al usar em, ya que rem siempre tendrá en cuenta una única medida para calcular el tamaño final de la fuente en cualquier lugar.

Unidades vw y vh

Estas también son unas unidades de reciente aparición en el estándar CSS. Su nombre, vw y vh corresponden con las siglas "viewport width" y "viewport height". Podríamos decir que se corresponde con la anchura y la altura de la pantalla del dispositivo, pero no necesariamente corresponde justamente con las dimensiones reales, puesto que a veces el viewport puede simular que el dispositivo tiene unas dimensiones diferentes de los píxeles de la pantalla. Esto se entiende mejor si conoces el concepto de viewport que hemos explicado anteriormente.

Estas unidades son relativas, aunque en este caso lo son a la pantalla del dispositivo. 1vw es la centésima parte de la anchura del viewport del dispositivo, de modo que 100vw sería la anchura total. Del mismo modo 1vh sería la centésima parte de la altura del viewport.

En la práctica es especialmente útil para conseguir que un elemento ocupe toda la altura disponible en la pantalla de un dispositivo. Como sabemos un height: 100% tiene un comportamiento muy errático, no funcionando en la mayoría de los casos para los objetivos deseados. Por ello podemos usar el vh como unidad, como sigue:

.lateral{
	width: 200px;
	height: 100vh;
	background-color: #4ff; 
}

La parte menos interesante es que no funciona en pantallas de ordenadores, por lo que tendrás que aplicar estilos alternativos si quieres que un elemento ocupa toda la anchura de la pantalla.

Cuáles son mejores unidades CSS, fijas o relativas?

Otra de las preguntas típicas que nos podemos hacer. Entonces, después de todo, ¿Cuáles son las unidades recomendadas, las fijas o las relativas? Pues me temo que no hay una respuesta exacta que sirva en todas las situaciones. Debemos conocer las características de cada una para saber cuál usar.

No obstante, debido al desarrollo responsive y la imposibilidad de conocer de antemano las dimensiones exactas de la pantalla, generalmente usarás unidades de medida relativas. Pero repito que no lo podemos tomar como una regla general.

Cuando definas una anchura de un elemento que forma parte de un layout usarás habitualmente las unidades relativas, para que al agrandar o disminuir el espacio siga adaptándose bien y se distribuyan correctamente las cajas para las dimensiones actuales del navegador. Esto en lo que tiene que ver con la anchura, puesto que alturas relativas no se suelen trabajar, ya que sabemos que la altura se calcula en función del contenido que haya que colocar en los contenedores.

En la definición de tamaños de las fuentes también es muy útil trabajar con unidades relativas, dado que así todos los tamaños del texto se adaptarán al elemento raíz. Experimentarás que es muy útil, llegada a una anchura dada de pantalla, aumentar (o disminuir) todos los tamaños de los textos de la página, para facilitar la lectura. Si has usado siempre fuentes con tamaños relativos sería muy fácil de conseguir, cambiando simplemente el valor del elemento BODY o HTML. En el siguiente artículo vamos a ampliar el uso adecuado de las unidades CSS para fuentes en diseños adaptables.

Pero a veces hay elementos que por necesidad tienen dimensiones fijas, como imágenes que quizás no deseamos que se estiren o se encojan dependiendo de la pantalla, columnas que deben tener siempre unas mismas dimensiones fijas, elementos de interfaz gráfica que no deseamos que alteren su forma, etc.

En general como ves, encontrarás más casos en los que aplicar unidades relativas, aunque no significa que debamos considerarlo como una regla general de obligado cumplimiento, pues habrá muchas ocasiones donde serán necesarias las unidades fijas.