Qué son las unidades relativas en CSS

Las unidades relativas en CSS son medidas calculadas a partir del entorno, como el tamaño del contenedor, la ventana del navegador o la tipografía base del usuario.

Hasta ahora hemos usado muchos píxeles (px) porque son fáciles de entender. Le decimos a una caja width: 300px y mide 300 píxeles. Muy cómodo. El problema aparece cuando esa caja vive en una pantalla que no tiene espacio suficiente, porque los píxeles obedecen sin pensar.

Si vuestra caja mide 800px y el móvil tiene 390px de ancho, el navegador no va a decir “uy, igual esto lo adapto un poco”. No. La dibuja, se sale por la derecha, aparece scroll horizontal y queda fatal.

Absolutas frente a relativas

En CSS tenemos unidades absolutas y unidades relativas. Las unidades absolutas tienen un tamaño fijo. El caso más habitual es el píxel.

.caja {
  width: 400px;
  padding: 24px;
}

Las unidades relativas, en cambio, se calculan a partir de otra referencia.

.caja {
  width: 80%;
  padding: 1rem;
}

Aquí el ancho depende del contenedor, y el relleno depende del tamaño de fuente raíz. Es decir, la medida se adapta al contexto.

Porcentajes (%)

El porcentaje es la unidad relativa más clásica. Cuando usamos %, el navegador calcula el valor tomando como referencia normalmente el tamaño del contenedor padre.

.contenedor {
  width: 800px;
}

.columna {
  width: 50%;
}

.layout {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.padre {
  height: 400px;
}

.hijo {
  height: 50%;
}

.padre {
  /* altura automática */
}

.hijo {
  height: 50%;
}

Unidades de viewport (vw, vh, vmin, vmax)

El viewport es la zona visible del navegador. No es la página completa, sino la ventana por la que el usuario está mirando.

Las unidades de viewport se calculan tomando como referencia esa ventana visible.

.hero {
  min-height: 100vh;
}

Esto es muy útil para portadas, pantallas de bienvenida, paneles a pantalla completa o zonas donde queremos que el primer bloque tenga presencia.

.portada {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.pantalla-completa {
  min-height: 100vh;
  min-height: 100dvh;
}

.bloque {
  width: 100vw;
}

.bloque {
  width: 100%;
}

Unidades tipográficas: em y rem

Ahora vamos con las unidades relativas para texto y espaciado. Aquí aparecen em y rem.

Ambas se basan en el tamaño de fuente, pero no toman la misma referencia.

.caja {
  font-size: 20px;
  padding: 1em;
}

.boton {
  font-size: 1rem;
  padding: 0.75em 1.25em;
}

.boton.grande {
  font-size: 1.25rem;
}

ul {
  font-size: 1.2em;
}

p {
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
}

.tarjeta {
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0.75rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

min(), max() y clamp()

CSS moderno permite combinar unidades con funciones matemáticas. Son tremendamente útiles para responsive.

.contenedor {
  width: min(90%, 1100px);
}

.seccion {
  padding: max(1rem, 4vw);
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}