¿Qué es clamp() y para qué sirve?
La función clamp(mínimo, preferido, máximo) devuelve el valor preferido, pero nunca por debajo del mínimo ni por encima del máximo. Combinada con unidades de viewport permite que un tamaño crezca de forma continua con el ancho de la pantalla: un título puede medir 2rem en el móvil y 3.5rem en escritorio, pasando por todos los tamaños intermedios, sin una sola media query.
Lo difícil es calcular el valor preferido. Para que el tamaño sea exactamente el mínimo en un ancho de pantalla y exactamente el máximo en otro, hay que calcular una pendiente y un punto de partida y expresarlos como algo del tipo 0.5rem + 2.5vw. Este generador lo hace por ti: indicas el valor mínimo, el máximo, el ancho mínimo y el máximo de viewport, y la unidad (px o rem, con el tamaño de fuente raíz configurable, 16 px por defecto).
El resultado es una línea como clamp(1rem, 0.5rem + 2.5vw, 2rem), con la pendiente y el término fijo explicados para que entiendas de dónde sale cada número. Un control deslizante simula el ancho de la pantalla y te muestra el tamaño calculado en cada punto. No sirve solo para el texto: también para padding, gap, márgenes o cualquier propiedad de longitud. Elige como anchos mínimo y máximo los de tus puntos de ruptura habituales, por ejemplo 360px y 1280px, para que el escalado ocurra donde de verdad cambia el diseño.
El generador funciona en tu navegador y es gratis sin límites: no necesitas ToolStudio Pro para usarlo ni para copiar el CSS.
¿Cómo generar un clamp()?
- Elige la unidad (px o rem) y, si hace falta, ajusta el tamaño de fuente raíz.
- Introduce el valor mínimo y el valor máximo.
- Introduce el ancho de viewport mínimo y máximo entre los que debe escalar.
- Mueve el deslizante para ver el tamaño calculado en cada ancho de pantalla.
- Copia el clamp() y úsalo en font-size, padding, gap o margin.
Usos habituales
- Títulos que escalan del móvil al escritorio sin saltos.
- Una escala tipográfica fluida completa para un sistema de diseño.
- Padding de secciones que crece con la pantalla.
- gap fluido en grids y flexbox.
- Márgenes y anchos de contenedor adaptativos.
- Sustituir varias media queries de font-size por una sola línea.
La fórmula de clamp() paso a paso
Pendiente = (valor máximo − valor mínimo) / (viewport máximo − viewport mínimo). Término fijo = valor mínimo − pendiente × viewport mínimo. El valor preferido es término fijo + pendiente × 100vw.
Ejemplo: de 16px a 32px entre 320px y 960px de ancho. Pendiente = 16 / 640 = 0.025, es decir 2.5vw. Término fijo = 16 − 0.025 × 320 = 8px = 0.5rem. Resultado: clamp(1rem, 0.5rem + 2.5vw, 2rem). A 320px da 8 + 8 = 16px y a 960px da 8 + 24 = 32px.
Accesibilidad: usa rem
Si el mínimo, el máximo y el término fijo están en rem, el tamaño respeta el tamaño de letra que el usuario haya configurado en su navegador. Con todo en px o solo en vw, el zoom de texto puede no funcionar como se espera.
Preguntas Frecuentes
¿Es gratis?
Sí, es gratis y sin límites. Los generadores CSS de ToolStudio no necesitan Pro: ajusta los valores, mira la vista previa y copia el CSS tantas veces como quieras.
¿Qué navegadores admiten clamp()?
Todos los navegadores actuales admiten clamp(), min() y max().
¿px o rem?
Se recomienda rem, porque respeta el tamaño de letra del usuario. El generador convierte usando el tamaño raíz que indiques, 16 px por defecto.
¿Qué pasa fuera del rango de viewport?
Por debajo del ancho mínimo el valor se queda en el mínimo y por encima del máximo se queda en el máximo.
¿Sirve para algo más que el tamaño de letra?
Sí. Funciona en cualquier propiedad de longitud: padding, margin, gap, width, border-radius y otras.