Las unidades CSS se dividen en absolutas (fijas) y relativas (escalan con algo). Elegir bien es clave para layouts responsivos y accesibles.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Usa para cosas que no deben escalar (bordes, detalles fijos pequeños).
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em se compone a través del anidamiento (un hijo de un hijo se multiplica), lo que puede crecer inesperadamente. rem siempre referencia la raíz, así que es predecible — la opción por defecto para tamaños de fuente y espaciado. Usa em cuando quieras que el tamaño sea relativo a la fuente local (p. ej. padding en un botón que escala con su texto).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Usar rem para tipografía respeta a los usuarios que establecen una fuente más grande por defecto — una victoria real de accesibilidad que px rompe.
La unidad correcta hace que los layouts sean responsivos y accesibles: rem para tipografía/espaciado (predecible + respeta la configuración del usuario), %/vw/vh para layout fluido, px para detalles fijos, y em para tamaño relativo local.
Las unidades viewport más nuevas (dvh, svh) también arreglan problemas de altura de barra de direcciones en móviles.