Skip to content

Clamp en CSS

clamp() en CSS es una función que permite definir un valor dentro de un rango flexible, estableciendo un valor mínimo, uno preferido y uno máximo. Esto es útil para adaptar propiedades (como tamaños de fuente o anchos) de manera fluida y responsiva.

La sintaxis de clamp() es:

clamp(valor mínimo, valor preferido, valor máximo)

Ejemplo:

h1 {
font-size: clamp(1em, 5vw, 2em);
}
  • 16px es el valor mínimo.
  • 5vw es el valor preferido (que escala con el ancho de la ventana).
  • 32px es el valor máximo.

Esto asegura que el tamaño de la fuente no sea menor a 16px ni mayor a 32px, pero se ajusta según el ancho de la ventana del navegador.