¿Qué son las unidades CSS?

Los valores de longitud CSS siempre incluyen una unidad (o una palabra clave especial como auto). La unidad indica al navegador respecto a qué es relativo el número.

Ejemplo:

.card {
  padding: 16px;
  font-size: 1rem;
  width: 50%;
  gap: 2vw;
}

Cada valor anterior se resuelve a un tamaño en px calculado en el motor de layout, pero el marco de referencia difiere.

Las tres familias que más usan los desarrolladores

Familia	Ejemplos	Relativo a
Absoluta	px	Píxeles del dispositivo (px CSS)
Relativa a fuente	rem, em, %	Font-size raíz o del padre
Relativa al viewport	vw, vh	Ancho o alto del viewport

La mayoría del CSS de producción mezcla las tres familias. Eso es normal.

Por qué importan las unidades en proyectos reales

Las unidades no son solo sintaxis. Afectan:

• Accesibilidad: la tipografía basada en rem respeta mejor los ajustes de fuente del navegador que px fijo en todas partes.
• Entrega de diseño: los diseñadores suelen especificar px; las bibliotecas de componentes suelen almacenar tokens rem.
• Comportamiento responsive: vw y clamp() escalan con el viewport sin escribir media query para cada paso.
• Anidamiento de componentes: em y % dependen del contexto del padre, lo que puede sorprenderte dentro de componentes anidados.

Unidades vs media queries

Las media queries cambian reglas en breakpoints. Las unidades relativas y clamp() cambian el tamaño calculado de forma continua o relativa al contexto.

Ambas herramientas resuelven problemas responsive, pero responden preguntas distintas:

• Media query: «Aplica una regla distinta en este breakpoint.»
• rem/em/vw/clamp: «Calcula un tamaño a partir del contexto.»

Conclusión clave

Antes de convertir un valor de diseño, pregunta: «¿Respecto a qué es relativo este tamaño?» px a la pantalla, rem a la raíz, em al padre, vw al viewport, % al bloque contenedor.

Prueba el Conversor de unidades CSS / Generador clamp con 16px e inspecciona cómo el mismo número se convierte en distintos valores rem, em y vw cuando cambia el contexto.