rem, vh, vw, vmin: nuevas unidades de texto en CSS3

Más recientemente la proliferación de los sitios web con diseño adaptable (responsive design in english) han marcado como tendencia el uso de unidades relativas (% o em) en detrimento del pixel para conseguir una mejor visualización en dispositivos móviles. Aún así, seguimos teniendo algunos problemas con el uso de estas unidades por el efecto «cascada». Un ejemplo sencillo:

<style>
body  { font-size: 100%; }
p, li { font-size: 0.75em; }
</style>
<p> soy un texto de 12px </p>
<ul>
<li> yo también soy un texto de 12px
<ul><li> Yo tengo 9 px </li></ul>
</li>
</ul>

Utilizando los em como unidad para párrafos y listas, que a su vez están anidadas, provoca que el tamaño del texto vaya decreciendo. Controlar este efecto en páginas grandes y complejas es bastante complicado y al final suele resolverse mediante prueba y error. El problema de em es que su valor va referido al contenedor del elemento que tiene aplicado el estilo.

Nuevas unidades relativas en CSS3: REM

Para corregir este problemilla las últimas especificaciones CSS3 nos traen novedades. Empezamos con rem, que no es un grupo de música, sino una nueva unidad de medida de texto relativa. La principal diferencia entre rem y em es que rem está referido al elemento raíz de la página en lugar del contenedor.

El ejemplo anterior quedaría resuelto con:

p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

VW, VH y VMIN: Unidades relativas al dispositivo

Otras novedades importantes son las unidades vw, vh y vmin. Enfocadas al uso en diseño adaptado a distintos dispositivos, se trata de unidades relativas al tamaño en pixels del dispositivo. Funcionan así:

• 1 vw = 1% de la anchura (width) de la ventana del dispositivo.
• 1vh = 1% de la altura (height) de la ventana del dispositivo.
• 1vim = 1% de la dimensión, altura o anchura, más pequeña del dispositivo.

Por ejemplo, suponiendo un tamaño de ventana del navegador de 1000×800, establecer el texto en 1.8vw equivale a 18 px , 2vh serían 16px y 1.5vmin = 12px.

Aún no todos los navegadores soportan las nuevas unidades, pero como ya estamos acostumbrados poco a poco se irán implementando. De momento funcionan 100% en Webkit (chrome, safari, ios) e IE9 / IE10 (en IE9 vmin se llama vm). En Firefox se incluirá en la versión 19 (finales de febrero) y en Opera se implementará en breve.