¿Cuándo Usar %, rem, em, vh o vw en CSS? Guía de Unidades Responsivas

¿Qué son las unidades relativas en CSS?

Las unidades de medida en CSS definen el tamaño de textos, imágenes, márgenes y contenedores. Las unidades relativas (a diferencia de px, que es fija) calculan su valor en función de algo más: el contenedor padre, el tamaño de fuente raíz, o las dimensiones de la ventana del navegador. Elegir la unidad correcta según el contexto es lo que hace que un diseño sea verdaderamente flexible y accesible.

% (Porcentaje)

El porcentaje define un tamaño relativo respecto al contenedor del elemento. Si un div tiene un ancho del 50%, ocupará la mitad del ancho de su contenedor padre.

Ventajas:

• Ideal cuando quieres que un elemento se ajuste automáticamente al tamaño de su contenedor.
• Si el tamaño de la pantalla cambia, el diseño se adapta sin necesidad de media queries adicionales.

Desventajas:

• El elemento depende completamente del tamaño de su contenedor, lo que puede generar comportamientos inesperados si ese contenedor cambia.
• En layouts anidados con varios niveles, calcular el tamaño final puede volverse confuso.

Un caso de uso muy común es hacer que una imagen ocupe todo el ancho disponible de su contenedor, útil para productos en una tienda WooCommerce:

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

rem (Root em)

rem es una unidad relativa al tamaño de fuente del elemento raíz del documento (html). Si la fuente raíz mide 16px, entonces 1rem equivale exactamente a 16px, sin importar en qué parte del documento se use.

Ventajas:

• Escalabilidad global: cambiar el tamaño de fuente en el elemento html ajusta automáticamente todo lo que usa rem en el sitio.
• Consistencia: ideal para mantener una jerarquía tipográfica coherente en todo el proyecto.

Desventaja:

• Si no conoces cómo está configurado el tamaño de fuente raíz, calcular valores exactos puede ser menos intuitivo al principio.

html {
  font-size: 16px; /* Tamaño de fuente base */
}

body {
  font-size: 1rem;  /* 16px */
}

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

p {
  margin-bottom: 1rem; /* 16px */
}

Este enfoque asegura que todos los tamaños y márgenes sean relativos a un único valor base, facilitando ajustes globales de escala.

em (Em)

La unidad em es similar a rem, pero en lugar de basarse en la fuente raíz, se calcula en función del tamaño de fuente de su elemento contenedor inmediato. Es útil cuando quieres que un grupo de elementos escale de forma proporcional entre sí.

Ventajas:

• Flexibilidad contextual: perfecta cuando los elementos deben ajustarse en relación a su contenedor directo, no al documento completo.
• Diseños modulares: si quieres que todo dentro de un componente se escale proporcionalmente, em es la opción natural.

Desventaja:

• Acumulación de escalas: si varios elementos anidados usan em sin cuidado, los tamaños pueden multiplicarse de forma inesperada (un em dentro de otro em se calcula sobre el resultado del anterior, no sobre la raíz).

.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 (Viewport Height y Viewport Width)

vh y vw son unidades relativas al tamaño de la ventana del navegador (viewport): 1vh equivale al 1% de la altura visible, y 1vw al 1% del ancho visible.

Ventajas:

• Responsividad completa: ideales para elementos que deben ocupar un porcentaje exacto de la pantalla, sin importar el dispositivo.
• Diseños fluidos: perfectas para secciones a pantalla completa (hero sections) o fondos que cubren todo el viewport.

Desventaja:

• No ideales para texto en general: usarlas para tipografía puede producir textos ilegibles en pantallas muy grandes o muy pequeñas si no se combinan con límites (min(), max() o clamp()).

.hero {
  height: 100vh; /* Ocupa el 100% de la altura del viewport */
}

.hero-text {
  font-size: 5vw; /* El tamaño del texto se ajusta al 5% del ancho del viewport */
}

Buenas prácticas al combinar unidades

• Usa rem para tipografía: escala todos los elementos de texto de forma proporcional a un único tamaño base, y respeta las preferencias de accesibilidad del usuario si ajusta el tamaño de fuente en su navegador.
• Usa vh y vw para elementos a pantalla completa: fondos, cabeceras hero o secciones que deben cubrir exactamente el viewport.
• Usa em cuando el elemento debe depender de su contenedor inmediato: ideal para márgenes y paddings dentro de un componente específico, no del documento completo.
• Evita px para tipografía y layout general: al ser una unidad fija, no se adapta ni respeta configuraciones de accesibilidad del navegador. Resérvalo para casos muy puntuales, como bordes de 1px.

Errores comunes a evitar

• Usar solo px en todo el proyecto: produce un diseño rígido que no escala ni respeta preferencias de accesibilidad del usuario.
• Usar em sin controlar la anidación: en contenedores anidados varios niveles, los valores en em pueden acumularse de forma inesperada; en esos casos, rem suele ser más predecible.
• No probar en distintos tamaños de pantalla: un diseño puede verse perfecto en tu monitor y romperse por completo en un móvil si no se prueba explícitamente.
• Abusar de vw para texto en pantallas grandes: sin límites definidos, el texto puede volverse desproporcionadamente grande en monitores anchos. Combínalo con clamp() para establecer un rango seguro, por ejemplo: font-size: clamp(1rem, 2vw, 2rem);.

Aplicación práctica en un sitio WordPress responsivo

Para lograr un sitio que se vea bien en móviles, tablets y escritorios en WordPress:

• Tipografía en rem: asegura que la fuente escale correctamente si el usuario ajusta el tamaño de fuente predeterminado de su navegador.
• Secciones hero en vh/vw: ideal para banners o cabeceras que deben adaptarse exactamente a la altura o ancho de la pantalla del visitante.
• Márgenes y anchos de contenedores en %: asegura que los elementos se ajusten automáticamente al espacio disponible, especialmente dentro de columnas o grillas.