Desarrollo y datos
Generador de Glassmorphism y Neumorphism CSS
Diseñador visual de cristal esmerilado y relieve soft UI con sombras duales y exportación Tailwind • Desarrollo
CSS moderno y diseño responsive
Calculadora de funciones clamp() fluidas
Crea tipografía y espaciados matemáticamente perfectos que escalan suavemente entre resoluciones de pantalla sin saltos bruscos de media queries. Ajusta los parámetros, prueba el simulador interactivo y exporta tu código en un clic.
Resoluciones de pantalla
px
px
px
Dimensiones del elemento
px
px
Expresión calculada en tiempo real
clamp(2.25rem, 1.5rem + 3.3333vw, 4.5rem)
Pendiente (vw)
3.3333vw
Intercepto (rem)
1.5rem
Límite mín
2.25rem
Límite máx
4.5rem
Diseño web fluido que respira y se adapta naturalmente a cada dispositivo.
Bloque 1
Bloque 2
Bloque 3
Curva de respuesta lineal por tramos
Curva clamp()
Viewport simulado
Haz clic sobre el gráfico para posicionar el simulador en cualquier ancho de pantalla.
/* Cargando... */¿Diseñando un sistema de diseño o plantilla web completa?
Genera la escala armónica simultánea para Display, H1, H2, H3, H4, Cuerpo y pies de foto con ratios musicales.
¿Qué es y cómo se calcula el escalado fluido con CSS clamp()?
El escalado tipográfico fluido es una técnica de maquetación web moderna que sustituye las hojas de estilo repletas de reglas @media por una única ecuación de interpolación lineal continua calculada en el navegador.
Tamaño(V) = Pendiente × Viewport + Intercepto en el eje Y
Para formular la propiedad clamp(mínimo, expresión_preferida, máximo) de forma accesible y compatible:
- Pendiente en unidades de viewport (vw): Se calcula restando el tamaño mínimo al máximo y dividiéndolo por el rango de resoluciones (V máx - V mín), multiplicado por 100 para obtener el porcentaje de ancho de pantalla.
- Intercepto en rem: Representa el valor base que no varía con el ancho del viewport. Expresarlo en
remgarantiza que si un usuario con dificultades visuales amplía el tamaño de fuente base de su navegador a 20 px o 24 px, todos los textos de tu sitio escalarán proporcionalmente respetando las pautas de accesibilidad WCAG.
Comparativa técnica: CSS clamp() frente a @media queries tradicionales
| Criterio de arquitectura | CSS clamp() fluido | Media queries clásicas (@media) |
|---|---|---|
| Transición entre dispositivos | Continuo, suave y sin saltos en cualquier ancho | Saltos bruscos al cruzar cada breakpoint |
| Mantenimiento del código | 1 sola línea de código declarativa | 3 a 6 bloques de media queries por selector |
| Rendimiento y CSS bundle | Archivo CSS más pequeño y sin recálculos de render | Hojas de estilo infladas con duplicidad de reglas |
| Sistemas de diseño (Tokens) | Tokens semánticos únicos vinculados a variables CSS | Múltiples tokens por tamaño según dispositivo |
Preguntas frecuentes sobre tipografía y espaciado fluido
La función CSS clamp(mínimo, preferido, máximo) restringe un valor entre un límite inferior y un límite superior. Al utilizar una expresión matemática lineal que combina unidades relativas al tamaño del navegador (vw) y unidades relativas a la raíz (rem) en el valor preferido central, el navegador ajusta el tamaño de la tipografía o el espaciado de forma continua y suave a medida que cambia el ancho de la ventana, sin necesidad de definir múltiples puntos de ruptura con media queries.
El uso de rem en el valor base fijo respeta las directrices de accesibilidad WCAG y la configuración de tamaño de fuente predeterminado que el usuario haya establecido en su sistema operativo o navegador (por ejemplo, personas con baja visión que configuran su fuente a 20 px o 24 px). Si se empleasen únicamente píxeles fijos o porcentajes de vw puros, el texto no respondería al zoom del usuario, vulnerando el criterio de éxito 1.4.4 de accesibilidad web.
Las reglas @media tradicionales provocan saltos visuales discretos y bruscos al cruzar ciertos anchos de pantalla arbitrarios (ej. 768 px o 1024 px), lo que a menudo genera desajustes tipográficos en resoluciones intermedias. Con clamp(), la pendiente matemática garantiza una proporción armónica perfecta en cualquier dispositivo (móviles compactos, plegables, tablets, portátiles y pantallas ultrawide) con un archivo de estilos más ligero y mantenible.
En Tailwind CSS puedes utilizar el valor generado de dos formas: mediante clases utilitarias arbitrarias directas sin espacios en el código HTML (por ejemplo, text-[clamp(1.125rem,0.75rem+1.6667vw,2.25rem)]) o extendiendo tu configuración en tailwind.config.js dentro de theme.extend.fontSize para reutilizar el valor de forma semántica en todo tu proyecto.
La función clamp() actúa como un sistema de seguridad de doble tope: si la pantalla del usuario mide menos que el viewport mínimo configurado, el navegador fijará automáticamente el valor exacto en el tamaño mínimo. Si la pantalla supera el viewport máximo, el valor se detendrá en el tamaño máximo tope, evitando que los títulos se vuelvan gigantescos o ilegibles en monitores 4K.
