Calculadora de clamp() para fuente fluida
Indica el tamaño mínimo, el máximo y entre qué anchos de pantalla debe crecer. La calculadora hace la cuenta de la recta y entrega el clamp() listo.
Cómo usarTamaño fluido con clamp()
El veloz murciélago hindú comía feliz cardillo y kiwi.
Calculadora de clamp() para fuente fluida: para qué sirve
Con clamp() el texto crece junto con el ancho de la pantalla sin necesidad de varias media queries: queda pequeño en el celular, grande en la computadora y cambia suavemente entre los dos.
La calculadora hace la cuenta de la recta entre el tamaño mínimo y el máximo en los anchos de pantalla que elijas y devuelve el valor en rem, que respeta la fuente configurada por la persona. Muestra el tamaño en cada ancho común y avisa cuando el máximo supera 2,5 veces el mínimo, punto a partir del cual el zoom del 200% exigido por las WCAG 1.4.4 puede dejar de funcionar.
Cómo usar
- Indica los tamaños mínimo y máximo en px.
- Elige entre qué anchos de pantalla crece.
- Copia el clamp() listo.
Cuándo usar
- Títulos que se ajustan al celular y a la computadora.
- Espaciados fluidos entre secciones.
- Escala tipográfica sin media queries.
Preguntas frecuentes
¿Cómo funciona clamp()?
clamp(mínimo, preferido, máximo) usa el valor preferido mientras esté entre los límites. El preferido es una recta, un valor en rem sumado a una fracción de vw, que crece junto con el ancho de la pantalla: en el celular queda en el mínimo y en la computadora llega al máximo.
¿Por qué usar rem y no px?
rem acompaña el tamaño de fuente que la persona eligió. Con px, quien aumentó la fuente predeterminada por dificultad de lectura no ve ninguna diferencia.
¿Qué es el aviso de zoom?
Las WCAG piden que el texto se pueda ampliar al 200%. Como la parte en vw no crece con el zoom, un máximo mucho mayor que el mínimo puede impedir esa ampliación. Una regla práctica segura es que el máximo no pase de 2,5 veces el mínimo.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.