Generador de clamp CSS fluido
Genera un valor CSS clamp() que escale con suavidad un tamaño de fuente o espaciado entre dos anchos de ventana, en px o rem.
- Funciona en tu navegador
- Sin subir archivos
- El resultado se queda en tu dispositivo
Privacidad y límitesSe ejecuta en tu navegador. No se sube nada.
El contenido de las entradas queda en esta pestaña; Refentra no lo sube ni guarda. Los recuentos agregados opcionales de acciones solo se envían con tu consentimiento de medición de uso. Borra el espacio al terminar.
Perfil compatible: Una unidad, px o rem; 0≤min≤max, 0<inicio<fin. Con rem, límites de ventana también son rem.
Máximo 200.000 unidades UTF-16; los parsers pueden admitir menos. Worker: 15 segundos (regex 1,5 segundos).
Revisa la entrada y el resultado
- Prepara la entrada y elige la operación
Elige px o rem de forma coherente, los tamaños mínimo y máximo, y los anchos de viewport en los que empieza y termina la interpolación fluida.
- Comprueba un ejemplo concreto
Prueba esta muestra y compara el resultado indicado: min=16 max=32 start=320 end=1280 unit=px → clamp(16px, calc(10.666667px + 1.666667vw), 32px)
- Revisa el resultado antes de reutilizarlo
Comprueba los dos extremos del viewport y los anchos intermedios; fuera del intervalo, clamp mantiene el mínimo o el máximo.
Respuestas sobre esta tarea
¿De qué depende rem?
rem usa el tamaño de fuente de la raíz. Usa las unidades de viewport y de tamaño de forma coherente, y prueba el zoom en lugar de suponer una raíz fija de 16px.
¿Qué compruebo si falla la entrada?
Se exige 0 ≤ mínimo ≤ máximo y 0 < viewport inicial < viewport final; si los dos extremos del viewport son iguales, no se puede definir una pendiente.
¿Hasta dónde llega esta herramienta?
Esto genera un tamaño fluido lineal, no una escala tipográfica adaptable completa; aún hay que probar los saltos de línea, el zoom y los ajustes de fuente del usuario.