Unidades en CSS

Las unidades en CSS definen cómo especificar dimensiones en un sitio web, como tamaño de fuente, ancho o altura. Se dividen en dos categorías principales: absolutas y relativas.

Unidades absolutas y relativas

Las unidades absolutas son valores fijos que representan el mismo tamaño en todos los dispositivos (por ejemplo, px o cm). Las relativas se adaptan al contexto, como el tamaño de fuente actual o el tamaño de la ventana del navegador.

Uso de unidades CSS en la práctica

Veamos algunos ejemplos de cómo funcionan las unidades absolutas y relativas en la práctica.

En este ejemplo, un párrafo tiene un tamaño de fuente absoluto (px) y otro relativo (em).

En este ejemplo, el ancho de una caja es el 50% del elemento padre y la altura es el 50% de la altura del viewport.

Unidades basadas en el viewport

Las unidades del viewport se adaptan al tamaño de la ventana del navegador. 100vw significa todo el ancho y 100vh toda la altura. Esto es especialmente útil para secciones a pantalla completa.

Comparación entre em y rem

La unidad em depende del tamaño de fuente del elemento padre, mientras que rem siempre depende del elemento raíz (html). Por ello, un mismo 2em y 2rem pueden dar tamaños distintos.

Combinación de unidades

En la práctica, a menudo se mezclan unidades relativas: por ejemplo, una caja puede tener un ancho del 80% y 60vh de altura, con un elemento interno de 50% de ancho y alto.

Consejos para usar unidades en CSS

El uso correcto de las unidades es clave para crear sitios web responsivos y fáciles de usar.

• Para diseño responsivo, da preferencia a las unidades relativas (em, rem, %, vh, vw).
• Evita usar demasiados valores fijos en px, ya que pueden ser difíciles de leer en pantallas pequeñas.
• Para impresión, utiliza unidades absolutas (cm, mm, in), ya que son más precisas.