ClampCalc
Crear clamp

Un font-size sin saltos

Genera una declaración font-size responsive

Convierte tamaños móvil y escritorio en una declaración lineal acotada y revisa pendiente y diferencias de extremos.

Fórmula CSS resuelta

Cómo se calcula este clamp de tamaño de fuente adaptable

font-size: clamp(1rem, 0.909091rem + 0.454545vw, 1.25rem);

Para 16 px a 320 px y 20 px a 1200 px, la pendiente es (20 − 16) ÷ (1200 − 320) = 0,004545 px por píxel de pantalla. Al multiplicarla por 100 se obtiene 0,454545vw; la intersección es 16 − (0,004545 × 320) = 14,545455 px, o 0,909091rem con una raíz de 16 px.

Comprobación de extremos: 14,545455 px + 0,454545vw da 16 px a 320 px y 20 px a 1200 px antes del redondeo de serialización.

clamp(mínimo, preferido, máximo) mantiene 1rem por debajo del extremo pequeño y 1,25rem por encima del grande. Revisa las diferencias de redondeo, el zoom de texto, el contenido y la maquetación antes de usarlo.

Cálculo CSS local

Extremos de ancho y valor

Los valores quedan en el dispositivo
Anchos de pantalla
px
px
Valores deseados en esos anchos
px
px
px
Unidades de salida

Solo escalas lineales ascendentes. Usa el token tras revisar contenido, zoom, raíz y diseño reales.

Evidencia del CSS redondeado

Clamp generado

rem · 6
Valor clampclamp(1rem, 0.909091rem + 0.454545vw, 1.25rem)
Declaración font-sizefont-size: clamp(1rem, 0.909091rem + 0.454545vw, 1.25rem);
Propiedad personalizada--fluid-size: clamp(1rem, 0.909091rem + 0.454545vw, 1.25rem);

Vista de coeficientes copiados

17.999998px

El diseño fluido debe seguir legible en cada ancho.

Evidencia de la fórmula

Pendiente exacta
0.0045454545 px/px
Intercepto exacto
14.54545455px
CSS en extremo pequeño
16px · Δ 0px
CSS en extremo grande
19.999996px · Δ -0.000004px

Las diferencias comparan tus px con la fórmula redondeada. ClampCalc no elige valores adecuados ni demuestra accesibilidad.