Calculadora de clamp() CSS

Escribe el tamaño que quieres en pantallas pequeñas, el tamaño para pantallas grandes y los dos anchos de viewport intermedios. La herramienta calcula el valor clamp() que traza una recta entre esos dos puntos y muestra el tamaño resultante en siete anchos habituales. La frase de ejemplo de la vista previa está aplicada con el valor generado, así que cambia de verdad al redimensionar la ventana.

¿Se sube mi información a algún sitio?

No. Aquí todo es aritmética hecha en tu navegador. Los números que escribes nunca salen hacia un servidor, y detrás del resultado no hay cuenta, registro ni petición de red.

¿Cómo funcionan los cálculos?

clamp() recibe tres valores: un mínimo, un valor preferido y un máximo. El navegador usa el valor preferido, pero nunca lo deja bajar del mínimo ni superar el máximo.

La parte interesante es el valor preferido. Tiene que crecer con el viewport, y para eso están las unidades vw: 1vw es el uno por ciento del ancho del viewport. Para pasar de 16px en un viewport de 320px a 48px en 1280px, el tamaño debe ganar 32px a lo largo de 960px de ancho, es decir 0,0333px por píxel, o 3.3333vw. La pendiente sola daría tamaños equivocados, así que un desplazamiento fijo coloca la recta en su sitio. El resultado es clamp(1rem, 0.3333rem + 3.3333vw, 3rem), y ese desplazamiento explica por qué el término del medio tiene dos partes.

Los números se redondean a cuatro decimales y se quitan los ceros finales, así que obtienes 1.5rem y no 1.5000rem. Los tamaños se escriben en píxeles; al cambiar la unidad de salida a rem se dividen entre el tamaño de fuente raíz, que en la configuración por defecto de cualquier navegador es 16px.

¿Y si los números no tienen sentido?

La herramienta te avisa en lugar de devolver algo incorrecto sin decir nada. Si los dos anchos de viewport son iguales no hay rango que recorrer, así que el tamaño se queda plano y el término en vw desaparece. Si el tamaño mínimo y el máximo coinciden, el aviso aparece por la misma razón.

El caso al que conviene prestar atención es un mínimo mayor que el máximo. CSS resuelve clamp() como max(MIN, min(VALUE, MAX)), así que gana el mínimo y el tamaño se queda anclado ahí para siempre. Los navegadores lo hacen en silencio. La tabla de la vista previa muestra el valor anclado y un aviso explica por qué.

¿Cuándo se usa esto?

Titulares que deben ser grandes en escritorio y legibles en el móvil, un padding de sección que no puede seguir en 8rem en una pantalla de 375px, el hueco de una rejilla de tarjetas y textos destacados que tienen que llenar su espacio a cualquier ancho.