Genera una función clamp() que escala el texto de forma fluida de pantallas pequeñas a grandes.
clamp(min, preferred, max) utiliza el valor preferido, pero nunca permite que salga del rango entre el mínimo y el máximo. Con un valor preferido de rem + vw, el texto crece de forma lineal con el ancho del viewport y se detiene en ambos extremos. Una sola línea reemplaza un conjunto de media queries.
Una línea recta que pasa por (viewport mín., tamaño mín.) y (viewport máx., tamaño máx.). Pendiente = (tamaño máx. − tamaño mín.) ÷ (viewport máx. − viewport mín.). Pendiente × 100 es el coeficiente vw; la intersección con el eje Y es la parte fija.
rem escala cuando los usuarios aumentan el tamaño de fuente base de su navegador. Fijarlo en px ignora ese ajuste, lo que supone un fallo de accesibilidad. Usa rem a menos que tengas un motivo específico para no hacerlo.
El uso exclusivo de vw hace que el texto sea demasiado pequeño en pantallas estrechas y demasiado grande en pantallas anchas. clamp bloquea los extremos.
Sí: se aplica el mismo cálculo matemático a padding, gap y margin.
Todos los navegadores principales desde 2020. No en IE, que ya no es un objetivo.
Solo tienes que introducir los tamaños de fuente mínimo y máximo junto con los anchos de viewport mínimo y máximo correspondientes.
Sí, un botón de copia específico te permite copiar al instante la regla CSS clamp() generada.
La fórmula generada combina unidades rem y vw para crear un escalado fluido entre los límites mínimo y máximo que definas.
No, la calculadora CSS clamp es completamente gratuita y puedes usarla directamente en tu navegador sin registrarte.