Cómo usar esta herramienta para desarrolladores
- Indica los valores mínimo y máximo en píxeles.
- Define los anchos de viewport entre los que debe escalar.
- Elige una propiedad CSS orientativa.
- Genera y copia la declaración resultante.
CSS Clamp Generator
Calcula una expresión CSS clamp() a partir de un tamaño mínimo, un máximo y un rango de viewport. La salida incluye la pendiente fluida en vw y una declaración lista para pegar en tipografía, espacios o cualquier propiedad numérica compatible.
Datos de entrada
Parámetros y código fuenteEspacio publicitario
Qué hace esta herramienta para desarrolladores
Construye una función lineal entre dos puntos de viewport y la limita con clamp() para evitar que el valor salga de los extremos establecidos.
pendiente = (max − min) / (viewportMax − viewportMin); intercepto = min − pendiente × viewportMin. La parte central se expresa como intercepto en px + pendiente × 100vw.
El resultado supone una relación lineal. Verifica el comportamiento en los breakpoints reales de tu diseño.
Ejemplo
font-size: clamp(16px, 1.43vw + 10.29px, 24px);
Casos de uso
- Tipografía fluida.
- Padding adaptable.
- Gaps y márgenes responsive.
- Tamaños de componentes sin múltiples media queries.
Consejos para obtener resultados fiables
- No inviertas el viewport mínimo y máximo.
- Usa extremos que ya funcionen bien por separado.
- Prueba zoom y tamaños de fuente del sistema.
- Redondea solo al final.
Detalles del procesamiento
El cálculo se realiza con números decimales en JavaScript y redondea la pendiente e intercepto a cuatro decimales para mantener una salida legible.
No modela escalas no lineales ni unidades relativas como rem en los puntos de entrada; la salida central usa px y vw.
Preguntas frecuentes
¿Cómo calculo clamp() para una fuente entre 16 px y 24 px?
Introduce 16 y 24 como límites y define el rango de viewport. El generador calcula automáticamente el término fluido.
¿Puedo usar el clamp generado para padding o margin?
Sí. clamp() funciona con propiedades que aceptan longitudes CSS; cambia la propiedad seleccionada o copia solo el valor.
¿Qué pasa si el viewport mínimo es mayor que el máximo?
La herramienta rechaza ese rango porque la pendiente no tendría la interpretación responsive esperada.
¿Por qué la parte central incluye vw y px a la vez?
La combinación representa la recta que conecta los dos tamaños objetivo a través del rango de viewport.
¿Necesito media queries además de clamp()?
No para limitar esos extremos, aunque puedes seguir usando media queries si el diseño cambia estructuralmente.
Herramientas relacionadas para desarrolladores
Resumen del resultado
| Módulo | Función |
|---|---|
| Entrada | Parámetros configurables |
| Salida | Código listo para copiar |
| Validación | Comprobaciones locales en el navegador |