CSS 03: Unidades de Medida

Introducción

En CSS, hay muchas formas de expresar longitudes. Saber cuál usar es crucial para crear diseños responsivos y accesibles. Las dividimos en dos grandes grupos: Absolutas y Relativas.

1. Unidades Absolutas

Son fijas y no cambian según el tamaño de pantalla o configuraciones del usuario. No se recomiendan para pantallas, excepto el píxel.

Unidad	Descripción	Uso Recomendado
px (Píxeles)	Unidad base en pantallas. 1px = 1/96 de pulgada.	Bordes, sombras, detalles finos.
cm, mm, in	Centímetros, milímetros, pulgadas.	SOLO para impresión (hojas de estilo print).
pt, pc	Puntos, picas.	Tipografía impresa.

Ancho: 200px (Fijo)

Esta caja siempre medirá 200px, sin importar el dispositivo.

2. Unidades Relativas

Son flexibles y se calculan en relación con otra cosa (el padre, la raíz, el viewport). Son la base del diseño responsivo.

A. Relativas a la Fuente (rem vs em)

rem (Root EM)

Es relativo al tamaño de fuente del elemento raíz (<html>). Por defecto, 1rem = 16px.

Regla de Oro: Usa rem para tamaños de fuente (font-size) y espaciados globales (margin, padding). Esto respeta la configuración de tamaño de texto del usuario.

em

Es relativo al tamaño de fuente del propio elemento (o del padre directo si se usa en font-size).

Cuidado: Los em se multiplican (efecto cascada) si anidas elementos.

Padre (20px)

Hijo (1.5em)
Cálculo: 1.5 * 20px = 30px

Nieto (1.5em)
Cálculo: 1.5 * 30px = 45px (¡Crecimiento exponencial!)

B. Relativas al Viewport (Pantalla)

Se basan en el tamaño de la ventana del navegador.

vw: 1% del ancho del viewport.
vh: 1% de la altura del viewport.
vmin: El valor más pequeño entre vw y vh.
vmax: El valor más grande entre vw y vh.

Ancho: 50vw (Mitad de pantalla)

C. Porcentajes (%)

Relativo al tamaño del elemento padre.

Padre (300px)

Hijo: 50% (150px)

Resumen y Buenas Prácticas

Texto: Usa rem para mantener la accesibilidad.
Layouts: Usa %, vw/vh o Flexbox/Grid.
Espaciado (Margin/Padding): Usa rem para consistencia o em si quieres que escale con el texto del componente.
Bordes: Usa px (generalmente quieres bordes finos y nítidos).
Media Queries: Usa em o px (los rems pueden comportarse raro en algunos navegadores antiguos en media queries, pero hoy día es seguro usar em/rem).