Generador de CSS clamp()
Genera un valor CSS clamp() fluido a partir de tamaños mínimo/máximo y anchos de viewport.
Salida
Introduce un tamaño mínimo y máximo junto con el rango de viewport en el que se aplican, y obtén una expresión CSS clamp() lista para usar para tipografías o espaciados fluidos y responsivos.
Cómo usar
- Introduce el tamaño mínimo y máximo en píxeles.
- Introduce el ancho de viewport mínimo y máximo entre los que deben aplicarse los tamaños.
- Copia la declaración clamp() generada, opcionalmente cambiando el nombre de la propiedad CSS.
Preguntas frecuentes
- ¿Cómo se calcula el valor fluido?
- Calcula una pendiente lineal entre los tamaños mínimo y máximo a lo largo del rango de viewport, expresada como una fórmula rem + vw dentro de clamp().
- ¿Por qué la salida usa rem y vw?
- rem mantiene el tamaño base relativo a la configuración de fuente del usuario, mientras que vw hace que escale de forma fluida con el ancho del viewport.
- ¿Qué pasa si mi viewport máximo es menor que el mínimo?
- La herramienta muestra un mensaje de validación pidiéndote que el ancho de viewport máximo sea mayor que el mínimo.