Generador de CSS clamp()
Genera un valor CSS clamp() fluido que escala de forma suave desde un tamaño mínimo en pantallas pequeñas hasta un tamaño máximo en pantallas grandes. Introduce tus tamaños y el rango de viewport para obtener CSS listo para pegar, los cálculos, una tabla de tamaños para los breakpoints habituales y una escala tipográfica fluida opcional.
Última actualización:
1rem en px (16 por defecto en el navegador)
p. ej. font-size, padding, gap, margin
1.2 = tercera menor
1.333 = cuarta justa
Cómo usar Generador de CSS clamp()
- Introduce el tamaño mínimo y el máximo en px o rem.
- Fija el rango de viewport en el que debe crecer el tamaño, p. ej. de 320px a 1280px.
- Elige la salida en rem o px y la propiedad que vas a dimensionar.
- Copia el CSS del resultado y pégalo en tu hoja de estilos.
- Opcionalmente marca la escala tipográfica para obtener un juego completo de tamaños de encabezado fluidos como propiedades personalizadas de CSS.
La fórmula de clamp()
Un tamaño fluido es una línea recta entre dos puntos: (viewport mínimo, tamaño mínimo) y (viewport máximo, tamaño máximo).
| Magnitud | Fórmula | Ejemplo: 16→24px, 320→1280px |
|---|---|---|
| Pendiente | (tamañoMáx − tamañoMín) ÷ (vwMáx − vwMín) | 8 ÷ 960 = 0.008333 |
| Parte vw preferida | pendiente × 100 | 0.8333vw |
| Intersección | tamañoMín − pendiente × vwMín | 16 − 2.667 = 13.333px = 0.8333rem |
| CSS | clamp(mín, intersección + pendiente×100vw, máx) | clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem) |
Rangos de tipografía fluida habituales
| Elemento | Mín → máx (px) | clamp() para 320px → 1280px |
|---|---|---|
| Texto del cuerpo | 16 → 18 | clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem) |
| Párrafo de entrada | 18 → 22 | clamp(1.125rem, 1.0417rem + 0.4167vw, 1.375rem) |
| H3 | 20 → 28 | clamp(1.25rem, 1.0833rem + 0.8333vw, 1.75rem) |
| H2 | 24 → 36 | clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem) |
| H1 | 32 → 56 | clamp(2rem, 1.5rem + 2.5vw, 3.5rem) |
Proporciones de escala tipográfica populares: 1.125 (segunda mayor), 1.2 (tercera menor), 1.25 (tercera mayor), 1.333 (cuarta justa), 1.5 (quinta justa) y 1.618 (proporción áurea). Usar una proporción menor en móviles y una mayor en escritorio evita que los encabezados abrumen las pantallas pequeñas.
Preguntas frecuentes
¿Cómo funciona CSS clamp()?
clamp(MIN, PREFERIDO, MAX) devuelve el valor preferido, pero nunca menos que MIN ni más que MAX. Para tipografía fluida, el valor preferido combina una parte fija y una parte de viewport, como 0.8333rem + 0.8333vw, de modo que el tamaño crece de forma lineal con el ancho de pantalla entre los dos límites.
¿Cuál es la fórmula de un valor clamp fluido?
pendiente = (tamañoMáx − tamañoMín) ÷ (viewportMáx − viewportMín); intersección = tamañoMín − pendiente × viewportMín; valor preferido = intersección + pendiente × 100vw. Para 16px a 24px entre 320px y 1280px: pendiente = 8 ÷ 960 = 0.008333, intersección = 13.333px, lo que da clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
¿Por qué usar rem en lugar de px en clamp()?
Los valores rem escalan con el tamaño de fuente que el usuario configura en su navegador, así que el texto respeta su preferencia. Un clamp() hecho solo con px y vw ignora ese ajuste. Mantener una parte en rem en el valor preferido también permite que el zoom del navegador agrande el texto.
¿Es accesible la tipografía fluida?
Puede serlo, pero los tamaños basados sobre todo en vw no crecen cuando los usuarios hacen zoom. Una regla práctica habitual es que el tamaño máximo no supere unas 2.5 veces el mínimo e incluir un componente en rem, para que el zoom al 200% (WCAG 1.4.4) siga funcionando.
¿Qué navegadores admiten clamp()?
Todos los navegadores modernos: Chrome y Edge 79+, Firefox 75+ y Safari 13.1+. Hoy es seguro usarlo en producción.
¿Puedo usar clamp() también para el espaciado?
Sí. clamp() funciona con cualquier propiedad de longitud, como padding, margin, gap, width o border-radius. Cambia el campo de propiedad CSS y la herramienta escribe la declaración completa.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.