Crea un tamaño fluido con clamp() de CSS

Los desarrolladores front-end lo usan cuando una tipografía o un espaciado debe crecer con suavidad entre dos límites según el ancho de pantalla.

Genera un clamp responsive entre dos tamaños. Todo el proceso permanece en tu navegador; los datos introducidos no se suben, comparten ni guardan.

Cómo usar

Introduce el tamaño mínimo en píxeles que quieres en pantallas pequeñas.
Proporciona el tamaño máximo en píxeles para pantallas más grandes.
Completa la anchura mínima y la anchura máxima del viewport en píxeles.
Ejecuta el generador para obtener una declaración CSS clamp lista para integrar.

Ejemplo

Un ejemplo común define un tamaño de texto que escala entre una pantalla pequeña y una pantalla grande. Después de la generación, copia el valor clamp y pruébalo en tu hoja de estilos para comprobar que el texto sigue la anchura del viewport como se espera.

Entrada

Resultado

clamp(16px, 13.090909px + 0.909091vw, 24px)

Límites y formatos

La herramienta solo genera el valor de tamaño fluido, no el diseño completo ni otros estilos.
La función clamp debe ser compatible con el navegador que usan tus visitantes.
Valores de viewport mal elegidos pueden hacer que el escalado sea demasiado rápido o demasiado lento.
Prueba siempre el resultado en varias anchuras de pantalla antes de desplegarlo.

Dónde se procesa

El cálculo del valor fluido se ejecuta en tu navegador. Las dimensiones que introduces permanecen en tu dispositivo y no se envían a un servicio externo. Puedes preparar tu CSS sin transmitir datos.

Preguntas frecuentes

¿Qué significan los cuatro valores?

Proporcionas el tamaño mínimo y máximo en píxeles, y luego la anchura mínima y máxima del viewport. La herramienta usa estos puntos para construir una progresión entre los dos tamaños.

¿Puedo usar el resultado para márgenes o espaciado?

Sí, el valor generado puede usarse para un tamaño de texto, un margen o un espaciado, siempre que la propiedad CSS acepte una función clamp. Solo adapta la unidad y la propiedad en tu hoja de estilos.

¿El resultado funciona en todos los navegadores?

La función clamp es ampliamente compatible con los navegadores modernos, pero las versiones antiguas pueden no reconocerla. Proporciona un valor de reserva si necesitas admitir navegadores muy antiguos.