¿Cómo calcula una calculadora de clamp() CSS la pendiente en vw?

Traza una línea a través de tus dos puntos de anclaje: pendiente = (tamañoMáx − tamañoMín) / (viewportMáx − viewportMín). Como 100vw equivale al ancho del viewport, el coeficiente vw del valor es esa pendiente multiplicada por 100, y la ordenada en rem es lo que queda cuando la línea se extiende hasta un viewport de ancho cero.

¿Por qué el término intermedio mezcla rem y vw?

El valor preferido es una línea recta: una parte fija que no depende del ancho (la ordenada en rem) más una parte que crece con el viewport (la pendiente en vw). Mezclar ambas permite que el tamaño escale con suavidad entre tu mínimo y máximo en lugar de saltar en un breakpoint.

¿Debo usar px o rem en los límites de clamp?

Los límites en rem respetan el ajuste de tamaño de fuente del navegador del usuario, lo que es mejor para la accesibilidad, así que esta herramienta genera rem por defecto. Puedes cambiar la lectura a px, pero los límites de clamp en rem son la opción más segura para dimensionar texto.

¿Puedo usar el mismo valor clamp() para márgenes y espacios?

Sí. clamp() funciona para cualquier longitud, así que el valor se aplica a padding, margin, gap y pistas de grid además de a font-size. Usa el preset de espaciado fluido como punto de partida y ajusta los tamaños mínimo y máximo.

¿Qué tamaño de fuente raíz debo introducir?

Usa el que tu página defina en el elemento html: 16px es el predeterminado del navegador y el predeterminado de la herramienta. Si escalas la raíz en otro sitio, introduce ese valor para que la salida en rem se corresponda con los píxeles que realmente ves.

¿Se suben a algún sitio los tamaños que escribo?

No. La calculadora de clamp() CSS funciona por completo en tu navegador. Los anchos de viewport y tamaños que introduces se usan solo para calcular el valor en tu dispositivo y nunca se envían a ArrayKit.

Calculadora de clamp() CSS

Convierte un tamaño mínimo y máximo más dos anchos de viewport en un valor clamp() CSS fluido, calculado en vivo en tu navegador.

La calculadora de clamp() CSS funciona por completo en tu navegador. Los anchos de viewport, tamaños y el tamaño de fuente raíz que introduces nunca salen de tu dispositivo y nada se sube a ArrayKit.

Abre el conversor de unidades CSS

Acerca de Calculadora de clamp CSS

La calculadora de clamp() CSS convierte cuatro números —un tamaño mínimo y máximo en píxeles más los dos anchos de viewport a los que se asignan— en un valor clamp() listo para pegar para tipografía y espaciado fluidos. Traza una línea recta entre tus dos puntos de anclaje, calcula la pendiente en vw y la ordenada en rem, y fija el resultado a tu mínimo por debajo del viewport pequeño y a tu máximo por encima del grande. Un deslizador de vista previa en vivo muestra el tamaño renderizado exacto en cualquier ancho intermedio, así que puedes evaluar la rampa a ojo antes de publicarla. Copia el valor clamp() en bruto, una declaración font-size o un valor arbitrario de Tailwind. Todo se calcula en tu dispositivo: los tamaños que escribes permanecen en el navegador y nada se sube a ArrayKit.

Características

Genera un valor clamp(minRem, pendienteVw + ordenadaRem, maxRem) a partir de cuatro números
El deslizador de vista previa en vivo muestra el tamaño renderizado en cualquier ancho de viewport
Define tu propio tamaño de fuente raíz para controlar la conversión px → rem
Muestra la pendiente exacta en vw y la ordenada en rem detrás del valor
Copia el valor clamp() en bruto, una declaración font-size o una clase de Tailwind
Presets para texto de cuerpo, encabezados, tipo hero y espaciado fluido
Maneja rampas descendentes donde el tamaño se reduce a medida que el viewport crece
Funciona por completo en tu navegador sin enviar ningún tamaño a ninguna parte

Cómo usar Calculadora de clamp CSS

Introduce tus anchos de viewport mínimo y máximo en píxeles
Introduce los tamaños mínimo y máximo que el elemento debe alcanzar en esos anchos
Ajusta el tamaño de fuente raíz si no es el predeterminado de 16px
Arrastra el deslizador de vista previa para comprobar el tamaño renderizado en todo el rango
Copia el valor clamp() o la declaración CSS en tu hoja de estilos

Ejemplo

Entrada

min viewport 320px, max viewport 1200px
min size 16px, max size 24px, root 16px

Salida

font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);

16px a 320px crece hasta 24px a 1200px y se mantiene plano fuera de esa banda.

Errores comunes y solución de problemas

El texto nunca crece más allá del tamaño mínimo. — Comprueba que el viewport mínimo sea menor que el máximo: un rango invertido aplana la rampa, así que el término preferido nunca gana entre los límites.
Los tamaños se ven mal tras cambiar el tamaño de fuente raíz. — Los rem de clamp() son relativos a la raíz. Si tu página define html { font-size } en algo distinto de 16px, ajusta el campo raíz para que la salida en rem se resuelva en los píxeles que esperas.
El valor escala de forma demasiado agresiva en pantallas muy anchas. — El término intermedio sigue creciendo hasta el viewport máximo. Reduce el ancho de viewport máximo o el tamaño máximo para que la rampa alcance su techo antes y se mantenga limitada más allá.
clamp() se ignora en un navegador antiguo. — clamp() tiene amplio soporte en los navegadores modernos. Para objetivos muy antiguos, proporciona primero un font-size estático como respaldo y deja que clamp() lo sobrescriba donde esté soportado.

Preguntas frecuentes

¿Cómo calcula una calculadora de clamp() CSS la pendiente en vw?: Traza una línea a través de tus dos puntos de anclaje: pendiente = (tamañoMáx − tamañoMín) / (viewportMáx − viewportMín). Como 100vw equivale al ancho del viewport, el coeficiente vw del valor es esa pendiente multiplicada por 100, y la ordenada en rem es lo que queda cuando la línea se extiende hasta un viewport de ancho cero.
¿Por qué el término intermedio mezcla rem y vw?: El valor preferido es una línea recta: una parte fija que no depende del ancho (la ordenada en rem) más una parte que crece con el viewport (la pendiente en vw). Mezclar ambas permite que el tamaño escale con suavidad entre tu mínimo y máximo en lugar de saltar en un breakpoint.
¿Debo usar px o rem en los límites de clamp?: Los límites en rem respetan el ajuste de tamaño de fuente del navegador del usuario, lo que es mejor para la accesibilidad, así que esta herramienta genera rem por defecto. Puedes cambiar la lectura a px, pero los límites de clamp en rem son la opción más segura para dimensionar texto.
¿Puedo usar el mismo valor clamp() para márgenes y espacios?: Sí. clamp() funciona para cualquier longitud, así que el valor se aplica a padding, margin, gap y pistas de grid además de a font-size. Usa el preset de espaciado fluido como punto de partida y ajusta los tamaños mínimo y máximo.
¿Qué tamaño de fuente raíz debo introducir?: Usa el que tu página defina en el elemento html: 16px es el predeterminado del navegador y el predeterminado de la herramienta. Si escalas la raíz en otro sitio, introduce ese valor para que la salida en rem se corresponda con los píxeles que realmente ves.
¿Se suben a algún sitio los tamaños que escribo?: No. La calculadora de clamp() CSS funciona por completo en tu navegador. Los anchos de viewport y tamaños que introduces se usan solo para calcular el valor en tu dispositivo y nunca se envían a ArrayKit.

Herramientas relacionadas

Conversor de Unidades CSS — Convierte px, rem, em, pt y % al instante con un tamaño base.
Generador de CSS Grid — Diseña una cuadrícula CSS de forma visual y copia el grid-template.
Conversor de colores CSS — Convierte entre HEX, RGB y HSL con una muestra en vivo.
Verificador de contraste — Comprueba la relación de contraste WCAG y si pasa AA/AAA entre dos colores.
Colores Tailwind — Crea una escala de tonos Tailwind 50-950 en OKLCH desde un color.
Cubic bezier — Da forma a curvas de easing cubic-bezier() de CSS arrastrando puntos.