HTML/CSS

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.