Generador de CSS Clamp()
Define un tamaño mínimo y máximo, y el rango de viewport en el que aplican, obtén un valor
clamp() fluido que escala suavemente entre ambos.
Cómo funciona
Los dos puntos (viewport, tamaño) definen una línea recta. Su pendiente se convierte en el
coeficiente del ancho del viewport, y su intersección con el eje y se convierte en un
desplazamiento fijo en rem, formando juntos
clamp(min, intersección + pendiente*100vw, max). Como esto es CSS real, no un
listener de redimensionado en JavaScript, el navegador lo recalcula en cada pase de layout
sin tirones de scroll ni parpadeo del tamaño incorrecto, y sigue funcionando incluso con
JavaScript desactivado.
Todos los valores se convierten a rem usando tu tamaño de fuente raíz, así que el resultado sigue escalando correctamente si un usuario ha cambiado el tamaño de fuente base de su navegador por accesibilidad. Nada aquí lee tu página, solo calcula la fórmula a partir de los números que introduces.
Preguntas frecuentes
¿Qué hace exactamente clamp()?
clamp(min, preferido, max) elige el valor intermedio, pero lo recorta para que nunca baje del mínimo ni supere el máximo. Aquí el valor "preferido" es una función lineal del ancho del viewport, así que el resultado crece suavemente con la pantalla hasta que alcanza uno de los límites, y entonces se mantiene estable.
¿Por qué usar esto en lugar de una media query?
Una media query salta entre tamaños fijos en puntos de quiebre específicos, lo que puede notarse como un salto visible. clamp() escala de forma continua con el viewport, así que el texto y el espaciado se redimensionan suavemente al arrastrar la ventana, sin ningún breakpoint que mantener.
¿Se envía esto a algún sitio?
No, la fórmula y la vista previa se calculan por completo en tu navegador. No se sube nada.