Acerca de esta herramienta
Este generador combina un mínimo, un valor preferido que puede variar con la ventana y un máximo en CSS clamp(), manteniendo los tamaños dentro de límites adecuados. Incluye texto de muestra en tiempo real y una salida CSS clara.
Cómo usarla
- Elige el modo y completa los tamaños y unidades correspondientes.
- Comprueba que el mínimo no sea mayor que el máximo.
- Consulta la salida y el texto de muestra; el modo fluido también necesita un intervalo creciente de anchos de ventana.
- Copia el CSS y comprueba el resultado en distintos anchos de ventana de tu proyecto.
Ejemplos de uso
- clamp(16px, 2vw, 32px) limita el tamaño de letra a 16–32px.
- Con tamaños 16→32px y ventanas 320→1200px, la fórmula fluida da 16px y 32px en los extremos.
- Fuera del intervalo de ventana, el tamaño permanece en el límite mínimo o máximo.
font-size: clamp(16px, 2vw, 32px);
/* 16px at 320px viewport; 32px at 1200px viewport */
font-size: clamp(16px, calc(10.181818px + 1.818182vw), 32px);Funcionamiento y explicación del CSS
clamp(min, preferred, max) usa el valor preferido entre los límites mínimo y máximo. El modo fluido calcula slope = (maxSize − minSize) / (maxViewport − minViewport) e intercept = minSize − slope × minViewport. El valor preferido es calc(intercept px + slope × 100vw).
Usos habituales
- Crear títulos adaptables con límites de tamaño.
- Conectar dos tamaños de letra mediante interpolación lineal.
- Reducir las consultas de medios dedicadas únicamente al tamaño de letra.
Privacidad
Los datos y los resultados se procesan en tu navegador, sin subirse ni guardarse automáticamente. Copia los resultados que quieras conservar antes de salir de la página.
FAQ
¿Qué es CSS clamp()?
Es una función matemática de CSS que limita un valor preferido mediante un mínimo y un máximo.
¿Qué representan los tres valores?
Mínimo, preferido y máximo, en ese orden. La herramienta valida tamaños y unidades y rechaza límites invertidos.
¿Por qué sirve para tipografía adaptable?
El valor preferido puede usar vw para variar con la ventana, mientras los límites impiden textos demasiado pequeños o grandes.
¿Por qué el modo fluido necesita dos anchos de ventana diferentes?
Definen el intervalo de interpolación lineal. El máximo debe superar al mínimo para evitar dividir por cero o invertir el intervalo.
¿Qué compatibilidad tiene clamp() con los navegadores?
Está ampliamente admitido en los navegadores modernos. Para navegadores antiguos, puedes declarar antes un tamaño fijo como alternativa.