Las unidades de medida en CSS son un aspecto esencial, ya que trabajamos con ellas todo el tiempo. No podemos crear prácticamente nada sin conocerlas, por lo que es importante conocerlas bien. En este artículo vamos a repasar estas medidas. ¡Toma nota!

Unidades de medida en CSS: todo lo que debes saber
Gracias a las unidades de medida, puedes establecer el tamaño que tienen ciertos elementos, su espacio, el tamaño de la tipografía, etc.
Todas las unidades de medidas pueden ser definidas en números negativos o positivos, aunque no todas las propiedades de CSS aceptan números negativos (por ejemplo, font-size solo admite positivos).
A la hora de clasificar las unidades de medida en CSS, debes saber que se dividen principalmente en dos grupos: fijas y relativas.

Unidades fijas

Las unidades fijas son absolutas, es decir, no dependen del contexto donde se estén aplicando.
La más conocida es el píxel que, como ya sabrás, es un punto físico de tu pantalla, cuyo tamaño siempre es el mismo (en tu pantalla, ya que en cierto modo depende de la densidad de píxeles).
La unidades absolutas son:
  • cm: centímetros.
  • mm: milímetros.
  • in: inches,pulgadas. Una pulgada equivale a 2,54 centímetros, o 96 píxeles.
  • pc: picas. Una pica equivale a 12 puntos, o 4,43 milímetros.
  • pt: puntos.
  • px*: píxeles.
*: Los píxeles, como ya hemos comentado, son relativos a la densidad de píxeles del monitor donde se muestran. Algunas personas lo consideran una medida relativa, aunque es más común decir que el absoluta, ya que la dependencia es a un dispositivo físico.
Seguramente, en más de una ocasión habrás utilizado píxeles en CSS, por lo que sabrás que su uso es realmente sencillo para hacer un layout: solo tendrías que indicar, por ejemplo, el alto y ancho en píxeles de cada elemento. Esto es lo que conocemos como diseño pixel-perfect.
Puede que hace años fuera una opción muy recomendable, pero hoy en día con la importancia del diseño responsive, debemos tener en cuenta la multitud de dispositivos con diferentes pantallas que puedan acceder a un sitio web. Es por esto que el siguiente tipo de unidades, las relativas, son las más recomendables hoy en día. Veamos en qué consisten.

Unidades relativas

Como hemos comentado, con la aparición del diseño responsive apareció una nueva necesidad: unidades de medida más flexibles. Estas son las que llamamos unidades relativas, ya que se basan en el contexto y otros factores externos. Todo esto hace que sea algo más complejo trabajar con ellas, pero eso no quita su importancia.
La unidades relativas las podemos clasificar también en función de su contexto, obteniendo las relativas a la tipografía, al viewport (ventana) y una medida más espcial, el porcentaje.

Relativas a la tipografía

Son relativas al tamaño de fuente predefinido, y son:
  • ex: también conocida como x-height. Está definida por la altura del carácter x, en minúsculas, con la tipografía y tamaño del contexto. En la práctica, su uso es muy poco habitual. Puede ser útil para ajustar el tamaño de una imagen que quieras mostrar en la misma línea del texto, manteniendo la armonía.
  • ch: es similar a la anterior, solo que esta está basada en el ancho del carácter cero (0). Al igual que ex, si se cambia la tipografía, probablemente cambie este valor.
  • em: la unidad em es equivalente al tamaño de fuente del elemento base, o del padre. Por ejemplo, si el tamaño de la tipografía del elemento padre es de 25px, entonces el valor 2em corresponderá a 50px (25 x 2). Esta unidad sí es muy utilizada y recomendable. No obstante, debes tener en cuenta que toma el valor del padre directo, por lo que puedes obtener resultados no esperados en elementos anidados.
  • rem: es similar a em, pero en este caso el valor siempre es el mismo, ya que parte del tamaño de la tipografía del elemento root (que es el elemento html). Esta unidad facilita mucho el trabajo al desarrollar sitios web responsive, ya que te permite escalar cómodamente.

Relativas al viewport (pantalla)

Las medidas relativas al viewport están basadas en el alto y ancho de la pantalla que está mostrando la web, e incluyen:
  • vh: viewport height. Corresponde al alto de la pantalla. 1vh equivale a un 1% de la altura. Por ejemplo, si la pantalla del navegador tiene una altura de 900px, 1vh equivaldría a 9px. Es similar al porcentaje, solo que este valor es consistente para todos los elementos, sin depender de las dimensiones del elemento padre.
  • vw: viewport width. Es similar al anterior, solo que en este caso se basa en la anchura de la pantalla. 1vw equivale al 1% del ancho. Por ejemplo, si la pantalla tiene un ancho de 1000px, 1vw equivaldrá a 10px. Es muy útil para adaptar contenedores a pantallas con diferente anchura.
  • vmin: viewport minimum. Equivale al 1% del valor mínimo del alto y ancho de la pantalla. Es decir, del valor más pequeño. Por ejemplo, si las dimensiones son 900x800px, 1vmin valdrá 8px (y 100vmin 800px).
  • vmax: viewport maximum. Es similar a la anterior, vmin, pero en este caso se toma el valor mayor. Por ejemplo, si las dimensiones de la pantalla son 900x800px, 1vman valdrá 9px (y 100vmax serán 900px).

Porcentajes

El porcentaje, técnicamente, no es una unidad de medida. En cambio, está relacionado por su uso tan habitual en el desarrollo de sitios web responsive.
Está basado en el valor, con la misma propiedad, del elemento padre. Por ejemplo, si el padre de un elemento tiene 100px de altura, y al elemento hijo se le asigna una altura del 50%, esta será de 50px.

Conclusiones

Puede que algunas medidas, si no las conocías antes, te hayan resultado algo complejas. No te preocupes. Con la práctica te acabarás haciendo a ellas. Como siempre, te recomendamos que consultes la W3C para ampliar más información, ver ejemplos y recomendaciones.
Y si quieres leer más sobre CSS, no te pierdas artículos como este de contadores de CSS.
¡Contacta con nosotros si tienes alguna duda! Y hasta la próxima.