Generador CSS clamp()
Generá valores CSS clamp() fluidos.
Cargando herramienta…
Siguiente paso recomendado
Diseñá y validá tu interfaz
Después de usar Generador CSS clamp(), continúa con Generador sombra css.
Herramientas relacionadas
Mismo tipo de tarea, para seguir en el sitio.
Guía de la herramienta
Generador CSS clamp(): cómo funciona
Información práctica para entender el resultado y usar bien esta herramienta.
Sobre Generador CSS clamp()
clamp() fija un piso y un techo y deja que el término del medio escale con el viewport. La pendiente es (máx − mín) ÷ (viewport máx − viewport mín).
Los tamaños pasan a rem con la raíz que indiques (16px por defecto) para respetar el escalado del usuario. El término vw queda en vw.
Un mínimo mayor que el máximo, un tramo de viewport nulo o invertido, y una raíz no positiva se rechazan. Los campos vacíos no inventan una declaración.
Cómo usarla
- 1Ingresá el tamaño mínimo y máximo en píxeles, y el rango de viewport donde debe escalar.
- 2Ajustá la raíz si no es 16px.
- 3Copiá la declaración clamp(). No se sube nada.
Preguntas frecuentes
- ¿Qué da 16px a 320px y 24px a 1200px?
- Con raíz de 16px: font-size: clamp(1rem, 0.8182rem + 0.0568vw, 1.5rem); Son 16px a 320px de ancho y 24px a 1200px.
- ¿Por qué rem y no px dentro del clamp?
- rem sigue el tamaño de raíz del usuario. El coeficiente vw sale de la pendiente en píxeles para que los extremos no se muevan.
- ¿Qué pasa si el mínimo es mayor que el máximo?
- La herramienta lo rechaza. clamp() necesita el piso igual o menor que el techo, y el tramo de viewport tiene que ser positivo.