Medidas en CSS: px, %, em, rem, vh y más - Guía definitiva

13 nov 2025

Las unidades de medida en CSS son como las herramientas de un carpintero: cada una tiene su propósito específico. Usar píxeles para todo es como usar solo un martillo - técnicamente funciona, pero hay herramientas mejores para cada trabajo.

Vamos a explorar cada unidad, cuándo usarla y por qué, con analogías que harán que todo tenga sentido.

Veamos un ejemplo visual antes de empezar:

Pulsa el botón que aparece debajo, RUN PROJECT

Unidades absolutas: precisión milimétrica

px (píxeles) - El martillo confiable

¿Qué es? Un píxel CSS no es exactamente un píxel físico de pantalla, sino una unidad de referencia que el navegador interpreta.

Analogía: Como usar una regla milimétrica - siempre mide lo mismo, sin importar el contexto.

.border-precision {
  border: 1px solid #ccc;        /* Siempre 1px, nunca se escala */
  border-radius: 8px;            /* Esquinas consistentes */
}

.icon {
  width: 24px;                   /* Iconos siempre del mismo tamaño */
  height: 24px;
}

.shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* Sombras precisas */
}

✅ Perfecto para:

Bordes (siempre 1px)
Iconos pequeños (16px, 24px, 32px)
Sombras y efectos decorativos
Elementos que deben mantener tamaño fijo

❌ Evitar para:

Texto (no es accesible)
Espaciado general
Elementos que deben escalar

Unidades relativas al texto: escalabilidad inteligente

em - El hijo obediente

¿Qué es? Relativo al tamaño de fuente del elemento padre.

Analogía: Como un termostato que se ajusta según la temperatura de la habitación donde está.

.card {
  font-size: 18px;               /* Tamaño base de la card */
}

.card h3 {
  font-size: 1.5em;              /* 1.5 × 18px = 27px */
  margin-bottom: 0.5em;          /* 0.5 × 27px = 13.5px */
}

.card p {
  font-size: 1em;                /* 1 × 18px = 18px */
  line-height: 1.4em;            /* 1.4 × 18px = 25.2px */
}

.card-small {
  font-size: 14px;               /* Cambiamos el contexto */
}

.card-small h3 {
  /* Ahora será 1.5 × 14px = 21px - se adapta automáticamente */
}

✅ Perfecto para:

Espaciado interno de componentes
Elementos decorativos que deben escalar con el texto
Componentes que necesitan escalabilidad interna

❌ Problemas:

Herencia en cascada (puede volverse impredecible)
Cálculos complejos con múltiples niveles

rem - La referencia universal

¿Qué es? Relativo al tamaño de fuente del elemento raíz (html).

Analogía: Como usar centímetros - siempre la misma referencia, sin importar dónde estés.

html {
  font-size: 16px;               /* Base de referencia (1rem = 16px) */
}

/* Sistema de espaciado consistente */
.spacing-xs { margin: 0.25rem; }  /* 4px */
.spacing-sm { margin: 0.5rem; }   /* 8px */
.spacing-md { margin: 1rem; }     /* 16px */
.spacing-lg { margin: 1.5rem; }   /* 24px */
.spacing-xl { margin: 2rem; }     /* 32px */

/* Tipografía escalable */
.text-sm { font-size: 0.875rem; } /* 14px */
.text-base { font-size: 1rem; }   /* 16px */
.text-lg { font-size: 1.125rem; } /* 18px */
.text-xl { font-size: 1.25rem; }  /* 20px */
.text-2xl { font-size: 1.5rem; }  /* 24px */

/* Si el usuario cambia el tamaño base del navegador,
   todo se escala proporcionalmente */

✅ Perfecto para:

Tamaños de fuente
Espaciado (margin, padding)
Dimensiones de componentes
Sistemas de design consistentes

✅ Ventaja clave: Respeta las preferencias de accesibilidad del usuario.

Unidades relativas al contenedor: fluidez inteligente

% (porcentaje) - El camaleón adaptativo

¿Qué es? Relativo al tamaño del elemento padre.

Analogía: Como fracciones de una pizza - si la pizza es más grande, tu porción también.

/* Layout fluido */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

.sidebar {
  width: 25%;                    /* Siempre 1/4 del contenedor */
}

.main-content {
  width: 75%;                    /* Siempre 3/4 del contenedor */
}

/* Imágenes responsivas */
.responsive-image {
  width: 100%;                   /* Nunca sobresale del contenedor */
  height: auto;                  /* Mantiene proporción */
}

/* Elementos centrados */
.modal {
  width: 90%;                    /* Se adapta a pantalla pequeña */
  max-width: 500px;              /* Pero no crece infinitamente */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

✅ Perfecto para:

Layouts fluidos
Imágenes responsivas
Anchos de contenedores
Posicionamiento relativo

❌ Limitaciones:

No funciona bien para heights sin contexto
Puede ser impredecible en elementos flexbox/grid

Unidades del viewport: diseño adaptativo moderno

vw/vh - La ventana como referencia

¿Qué son?

vw = 1% del ancho del viewport
vh = 1% del alto del viewport

Analogía: Como porcentajes de la ventana - si cambias el tamaño de la ventana, todo se adapta proporcionalmente.

/* Hero section que siempre ocupa toda la pantalla */
.hero {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Texto que escala con el tamaño de pantalla */
.hero h1 {
  font-size: 8vw;               /* Se hace más grande en pantallas grandes */
  max-font-size: 4rem;          /* Pero no infinitamente grande */
}

/* Sidebar que ocupa porcentaje fijo del viewport */
.sidebar-fixed {
  width: 20vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}

dvh/dvw - La solución moderna para móviles

¿Qué son? Dynamic viewport units - se adaptan cuando aparece/desaparece la barra de navegación móvil.

/* Problema clásico en móviles */
.fullscreen-old {
  height: 100vh;                /* No considera la barra de navegación */
}

/* Solución moderna */
.fullscreen-new {
  height: 100dvh;               /* Se adapta dinámicamente */
}

/* También disponibles: dvw, dvmin, dvmax */

vmin/vmax - Los extremos inteligentes

¿Qué son?

vmin = el menor entre vw y vh
vmax = el mayor entre vw y vh

/* Elemento que siempre cabe en pantalla */
.always-visible {
  width: 80vmin;                /* Nunca sobresale, en ninguna orientación */
  height: 80vmin;
}

/* Texto que aprovecha el eje más largo */
.responsive-text {
  font-size: 5vmax;             /* Más grande en landscape, más pequeño en portrait */
}

Unidades de contenedor: el futuro del responsive

cqw/cqh - Container Query Units

¿Qué son? Relativas al contenedor padre, no al viewport.

.card-container {
  container-type: inline-size;   /* Habilita container queries */
}

.card {
  padding: 2cqw;                /* Relativo al ancho del contenedor */
  font-size: 4cqw;              /* Se adapta al contenedor, no al viewport */
}

/* La card se comporta diferente según su contenedor */
@container (min-width: 300px) {
  .card h3 {
    font-size: 6cqw;
  }
}

La fórmula perfecta: cuándo usar cada una

Sistema de medidas por casos de uso

/* Tipografía y espaciado: rem es rey */
body { font-size: 1rem; }
h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.section { padding: 3rem 0; }

/* Precisión visual: px para detalles */
.border { border: 1px solid #ccc; }
.icon { width: 24px; height: 24px; }
.shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* Layouts fluidos: % y viewport units */
.container { width: 90%; max-width: 1200px; }
.hero { height: 100vh; }
.grid-item { width: calc(50% - 1rem); }

/* Componentes escalables: em */
.button {
  font-size: 1rem;
  padding: 0.75em 1.5em;        /* Se escala con el tamaño de fuente */
  border-radius: 0.25em;
}

/* Responsive typography: clamp() */
.heading {
  font-size: clamp(1.5rem, 4vw, 3rem);  /* Min 24px, max 48px, escalable */
}

La regla 80/20 de las unidades CSS

80% de tu CSS debería usar:

rem para tamaños de fuente y espaciado
% para anchos fluidos
px para bordes y detalles precisos

20% casos especiales:

vh/vw para elementos fullscreen
em para componentes escalables
vmin/vmax para elementos adaptativos
Container queries para componentes modulares

Funciones modernas: calc(), clamp() y min()/max()

calc() - La calculadora CSS

/* Layouts complejos */
.sidebar {
  width: calc(25% - 1rem);       /* Porcentaje menos spacing fijo */
}

.content {
  width: calc(100vw - 250px);    /* Viewport menos sidebar fijo */
}

/* Centrado matemático */
.centered {
  width: calc(100% - 2rem);      /* Ancho total menos padding */
  margin: 0 1rem;
}

clamp() - El rango inteligente

/* Tipografía fluida perfecta */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* Mínimo 32px, máximo 64px, escalable entre medias */
}

/* Contenedores adaptativos */
.container {
  width: clamp(300px, 90%, 1200px);
  /* Nunca menos de 300px, nunca más de 1200px */
}

/* Espaciado inteligente */
.section {
  padding: clamp(2rem, 8vw, 6rem) 0;
  /* Más padding en pantallas grandes, mínimo decente en pequeñas */
}

Guía de decisión rápida

¿Qué unidad usar?

/* ¿Necesita precisión visual? → px */
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

/* ¿Debe escalar con el texto del usuario? → rem */
font-size: 1.2rem;
margin: 2rem 0;
padding: 1rem;

/* ¿Debe adaptarse al contenedor? → % */
width: 80%;
img { width: 100%; }

/* ¿Debe ocupar toda la pantalla? → viewport units */
height: 100vh;
width: 100vw;

/* ¿Es un componente modular? → em */
.button {
  padding: 0.75em 1.5em;
  font-size: 1em;
}

/* ¿Necesita fluidez entre rangos? → clamp() */
font-size: clamp(1rem, 2.5vw, 2rem);

Errores comunes que debes evitar

❌ No hagas:

/* Texto en px (no accesible) */
p { font-size: 16px; }

/* Heights en % sin contexto */
.box { height: 50%; }  /* ¿50% de qué? */

/* Viewport units en elementos pequeños */
.icon { width: 2vw; }  /* Se vuelve invisible en móviles */

/* Em anidados sin control */
.parent { font-size: 1.2em; }
.child { font-size: 1.2em; }  /* 1.2 × 1.2 = 1.44em = chaos */

✅ Mejor:

/* Texto escalable */
p { font-size: 1rem; }

/* Heights con contexto */
.box { height: 50vh; }  /* O min-height: 300px */

/* Icons con tamaño mínimo */
.icon { 
  width: clamp(16px, 2vw, 32px);
}

/* Control de em con CSS custom properties */
.component {
  --font-size: 1rem;
  font-size: var(--font-size);
}
.component__title {
  font-size: calc(var(--font-size) * 1.5);
}

Conclusión: diseña con propósito

Las unidades CSS no son solo números - son herramientas de comunicación entre tu diseño y el navegador. Cada una tiene su superpoder:

rem: La base universal para escalabilidad
px: Precisión cuando la necesitas
%: Fluidez relativa al contexto
vh/vw: Control total del viewport
em: Escalabilidad modular
clamp(): Fluidez inteligente entre límites

La regla de oro: Usa la unidad que mejor exprese la intención de tu diseño. Si quieres que algo escale con el texto del usuario, usa rem. Si necesita adaptarse al contenedor, usa %. Si debe ocupar la pantalla completa, usa viewport units.

Recuerda: No existe la unidad perfecta para todo. Como un buen carpintero, ten todas las herramientas disponibles y elige la correcta para cada trabajo. Tu CSS será más predecible, mantenible y accesible.