rem, em, %, vh o vw: qué unidad CSS usar en cada caso

Tabla de decisión rápida: qué unidad usar en cada caso

Si solo te llevas una cosa del artículo, que sea esta tabla:

Las unidades relativas —a diferencia de px, que es fija— calculan su valor en función de otra cosa: el contenedor padre, el tamaño de fuente raíz, las dimensiones de la ventana o las del contenedor consultado. Esa dependencia es justamente lo que hace flexible un diseño, y también lo que lo rompe cuando se elige mal la referencia.

% (porcentaje): relativo al contenedor padre

El porcentaje calcula su valor sobre la dimensión correspondiente del contenedor padre. Un div con width: 50% ocupa la mitad del ancho de su padre, sin importar cuánto mida ese padre en píxeles. Es la unidad natural para anchos de columnas, imágenes y contenedores dentro de una grilla.

Un detalle que confunde a mucha gente: en padding y margin, el porcentaje se calcula siempre sobre el ancho del contenedor, incluso en las propiedades verticales. Un padding-top: 50% no es la mitad del alto del padre, sino la mitad de su ancho. Ese comportamiento se usa a propósito para reservar espacio con relación de aspecto fija, pero sorprende cuando aparece sin querer.

Ventajas: el elemento se adapta solo al espacio disponible, sin media queries adicionales.
Desventaja: depende por completo del padre, y en layouts con varios niveles de anidación calcular el resultado final se vuelve difícil de predecir.

img {
  width: 100%;   /* Ocupa todo el ancho del contenedor */
  height: auto;  /* Mantiene la relación de aspecto */
}

rem: relativo a la raíz del documento

rem (root em) se calcula sobre el tamaño de fuente del elemento raíz, html. Si esa raíz mide 16px —el valor por defecto en prácticamente todos los navegadores—, 1rem equivale a 16px en cualquier punto del documento, sin importar la anidación. Esa independencia del contexto es exactamente lo que la hace la mejor opción para tipografía y espaciados globales.

Aquí va el error más caro de esta guía: no fijes font-size en píxeles en el elemento html. Escribir html { font-size: 16px; } congela la raíz y anula el ajuste de tamaño de fuente que el usuario haya configurado en su navegador, que es justamente lo que rem debía respetar. Un usuario con baja visión que subió el tamaño base a 24px seguirá viendo el sitio a 16px. Si necesitas declarar algo, usa 100%:

html {
  font-size: 100%; /* Respeta la preferencia del navegador (16px por defecto) */
}

body {
  font-size: 1rem;      /* 16px con la configuración por defecto */
}

h1 {
  font-size: 2rem;      /* 32px */
}

p {
  margin-bottom: 1.5rem; /* 24px */
}

Ventajas: escala global desde un único punto, jerarquía tipográfica coherente y accesibilidad respetada.
Desventaja: obliga a pensar en múltiplos de la base; si vienes de trabajar en píxeles, al principio cuesta traducir las medidas.

em: relativo al elemento padre

em se calcula sobre el tamaño de fuente del elemento padre más cercano. Su utilidad concreta es esta: permite que un componente entero escale en bloque cuando cambia su tamaño de texto. Un botón cuyo padding está en em mantiene siempre la misma proporción entre el texto y el aire que lo rodea, tanto en su versión pequeña como en la grande.

.boton {
  font-size: 1rem;
  padding: 0.75em 1.5em;  /* Proporcional al texto del botón */
  border-radius: 0.25em;
}

.boton--grande {
  font-size: 1.25rem;      /* El padding crece solo, sin tocar nada más */
}

El riesgo es la acumulación por anidación: cada em se multiplica por el del nivel anterior. Tres contenedores anidados con font-size: 1.2em producen un texto 1,73 veces mayor que la base, no 1,2. Cuando ese efecto no es intencional, la solución es rem.

.container {
  font-size: 18px;
}

.container h2 {
  font-size: 2em;      /* 36px (2 × 18px) */
}

.container p {
  margin-top: 1.5em;   /* 27px (1.5 × 18px) */
}

vh y vw: relativos a la ventana del navegador

1vh equivale al 1% del alto del viewport y 1vw al 1% de su ancho, donde viewport es el área visible de la ventana del navegador. Son las unidades para secciones a pantalla completa, fondos y cabeceras tipo hero.

Tienen dos trampas conocidas, y ambas tienen solución:

• vw incluye la barra de desplazamiento vertical en muchos navegadores de escritorio. Un elemento con width: 100vw dentro de una página con scroll queda unos píxeles más ancho que el contenido y provoca un desplazamiento horizontal indeseado. Para anchos completos suele ser mejor width: 100%.
• 100vh se corta en móvil. La unidad vh toma como referencia el viewport más grande posible, ignorando la barra de direcciones cuando está visible. El resultado: la sección se recorta abajo y da un salto cuando la barra se oculta al hacer scroll.

dvh, svh y lvh: la solución al 100vh en móviles

Las unidades de viewport dinámico resuelven el problema del recorte en móviles distinguiendo tres estados de la ventana: svh mide el viewport pequeño (con las barras del navegador visibles), lvh el grande (con las barras ocultas) y dvh es dinámica, sigue el estado real en cada momento. Para una sección que debe ocupar exactamente la pantalla visible, 100dvh es la respuesta correcta.

Estas unidades están disponibles en Chrome 108 o superior, Firefox 101 o superior y Safari 15.4 o superior, además de Edge 108, Opera 94 y Samsung Internet 21. Con esa cobertura ya se pueden usar directamente, y basta declarar vh antes como respaldo para navegadores antiguos:

.hero {
  height: 100vh;   /* Respaldo para navegadores sin soporte */
  height: 100dvh;  /* Altura real de la ventana visible */
}

.hero-titulo {
  /* Nunca menor que 1.5rem ni mayor que 3rem */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

cqi y cqw: unidades que miran al contenedor, no a la ventana

Las unidades de container query miden el tamaño del contenedor al que pertenece el elemento en lugar del de la ventana: cqw y cqh corresponden al ancho y al alto del contenedor consultado, y cqi y cqb a sus ejes en línea y de bloque. Resuelven un problema que vw no puede resolver: una tarjeta reutilizable debe verse distinta según ocupe una columna estrecha o el ancho completo, aunque la ventana sea la misma.

El soporte llegó a Chrome 105, Edge 105, Firefox 110, Safari 16, Opera 91 y Samsung Internet 20, y alcanzó disponibilidad en los cuatro navegadores principales en febrero de 2023.

.tarjeta-wrapper {
  container-type: inline-size;   /* Declara el contenedor consultable */
}

.tarjeta h3 {
  font-size: clamp(1rem, 5cqi, 1.75rem); /* Escala según el contenedor */
}

Errores comunes al combinar unidades

Estos son los fallos que aparecen una y otra vez en revisiones de código CSS:

• Fijar font-size en px en el elemento html. Anula la preferencia de tamaño de fuente del usuario en todo el sitio y convierte rem en una unidad tan rígida como px.
• Usar em sin controlar la anidación. Los valores se multiplican nivel a nivel; si el tamaño debe ser predecible, usa rem.
• Poner tipografía en vw sin límites. El texto se vuelve ilegible en pantallas pequeñas y desproporcionado en monitores anchos. Envuélvelo en clamp().
• Usar 100vw para anchos completos. Incluye la barra de desplazamiento y genera scroll horizontal. 100% suele ser lo correcto.
• Usar 100vh en móviles. Recorta el contenido mientras la barra de direcciones está visible. Usa 100dvh con vh de respaldo.
• Probar solo en tu monitor. Un diseño puede verse perfecto en escritorio y romperse en un teléfono; las herramientas de desarrollo del navegador permiten simular ambos en segundos.

Aplicación práctica en un sitio WordPress

En WordPress la mayor parte del CSS viene del tema, así que estas decisiones se aplican en la hoja de estilos del tema hijo o en el CSS adicional del personalizador. Un esquema que funciona bien:

• Tipografía y espaciados verticales en rem, para que todo el sitio escale desde un único valor base y respete la configuración del visitante.
• Padding interno de botones, etiquetas y tarjetas en em, para que cada componente mantenga sus proporciones al cambiar de tamaño.
• Anchos de columnas y contenedores en %, especialmente dentro de las grillas del editor de bloques.
• Secciones hero en dvh, para que el banner ocupe exactamente la pantalla visible en el móvil.

Conviene recordar que las unidades no arreglan un sitio lento: afectan a cómo se ve el diseño, no a cuánto tarda en cargar. Si el problema es de velocidad, el camino es otro y está en la guía de trucos para optimizar el rendimiento de WordPress.