Calculadora de CSS clamp()

CSS clamp(MIN, PREFERRED, MAX) permite que una sola declaración reemplace todo un conjunto de media queries: el valor se mantiene en MIN por debajo del viewport más pequeño, en MAX por encima del más grande y escala suavemente en el medio. La parte difícil es el término PREFERRED —una expresión relativa al viewport como 0.833rem + 0.833vw— que nadie quiere derivar a mano. Esta calculadora lo calcula de verdad a partir de cuatro números: un tamaño mínimo, un tamaño máximo y el ancho de viewport en el que se aplica cada uno.

Se muestra cada número intermedio, no solo la línea final: la pendiente (cuántas unidades de tamaño crece el valor por píxel de viewport), esa misma pendiente expresada como coeficiente vw y la intersección con el eje Y (la constante que se suma al término vw para que la línea pase exactamente por los dos puntos que especificaste). Cualquiera que haya pegado un valor clamp() de un tutorial sin entenderlo puede ver (y comprobar) la aritmética real aquí.

Un control deslizante de ancho de viewport maneja una vista previa en vivo, de modo que el escalado fluido es visible, no solo calculado: arrástralo entre los puntos de quiebre mínimo y máximo y observa cómo el texto de muestra se redimensiona exactamente igual que durante el redimensionamiento real de la ventana del navegador. La línea de salida y el desglose se actualizan con cada pulsación de tecla; esto se combina de forma natural con el conversor de px a rem cuando también hay que convertir el tamaño de fuente base.

Cambia al modo de escala tipográfica para obtener un sistema de tipografía fluida completo en un solo paso: introduce un tamaño base y una razón modular (de 1,125 a 1,5) y obtén seis tamaños (small, base, h4, h3, h2 y h1), cada uno calculado como su propia línea clamp() entre una progresión móvil más suave y la razón de escritorio completa, listos para copiar como un bloque de propiedades personalizadas CSS.