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
Todos los datos, cálculos, generación de CSS y vistas previas se procesan en tu navegador. No se sube contenido, no se usan servidores de procesamiento, bases de datos, API en línea ni CDN de terceros, y tus entradas no se guardan automáticamente.
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.