Calculadora CSS clamp para tamaños fluidos

Define los tamaños extremos y sus anchos de pantalla. Cambia la vista previa para comprobar el valor entre ambos límites.

Se ejecuta localmente en tu navegador

Ver categoría: Frontend y diseño (34)

· clamp() · vw · rem

960px

Cómo construir una regla clamp() a partir de dos extremos de tamaño

La calculadora convierte dos tamaños extremos y los anchos de pantalla en los que se aplican en una sola expresión clamp(). Escribe la regla para font-size, padding, gap o margin, previsualiza el valor en cualquier ancho del intervalo y copia el CSS final. Todo se ejecuta en la página.

La vista previa no cambia el tamaño de tu ventana: el deslizador simula un ancho de pantalla y el elemento de muestra recibe el mismo valor en px que resolvería la expresión en ese ancho. Por debajo del ancho menor el navegador mantiene el tamaño mínimo y por encima del mayor mantiene el máximo.

Elige la propiedad CSS que debe definir la regla: font-size, padding, gap o margin.

Introduce el tamaño mínimo y el máximo en px y los anchos de pantalla a los que pertenecen. Los valores predeterminados —16 px y 32 px entre 320 px y 1440 px— describen un título que crece de móvil a escritorio.

Selecciona la unidad de salida. rem divide cada medida por el tamaño de fuente raíz, 16 de forma predeterminada y editable; px mantiene los números tal como los escribes. El coeficiente vw es idéntico en ambas.

Arrastra el deslizador de la vista previa o escribe un ancho dentro del intervalo para leer el valor resuelto a su lado. Las tres etiquetas bajo la vista previa muestran el valor en el ancho mínimo, el medio y el máximo.

Copy CSS copia la regla completa; Reset devuelve los ocho campos a sus valores predeterminados.

La aritmética que hay detrás de la cadena clamp()

De dos extremos a la cadena clamp()

La expresión es la recta que une los dos extremos. Con los valores predeterminados la pendiente es (32 − 16) ÷ (1440 − 320) × 100 = 1.4286vw y la ordenada en el origen es 16 − 1.4286 × 320 ÷ 100 = 11.4286px, así que la regla queda clamp(1rem, 0.7143rem + 1.4286vw, 2rem).

A 960 px el término central se resuelve como 0.7143rem + 1.4286vw = 25.14px, que es lo que muestran la lectura y el elemento de vista previa. Los términos se redondean a cuatro decimales y el valor mostrado a dos.

Salida en rem y tamaño de fuente raíz

Con la unidad en rem, cada medida de la expresión se divide por el tamaño de fuente raíz: con los 16 px predeterminados el intervalo 16 → 32 px pasa a 1rem → 2rem, mientras que una raíz de 20 convierte ese mismo intervalo en 0.8rem → 1.6rem. El coeficiente vw no se convierte, porque un vw es una fracción del ancho de pantalla y no de la raíz.

El campo de la raíz es una constante de conversión, no un ajuste que se envíe al navegador. El tamaño renderizado solo coincidirá con la vista previa si el campo coincide con el font-size del elemento html de la página donde pegues la regla.

Qué aceptan los campos y cuándo se borra la salida

Los tamaños aceptan decimales y deben ser 0 o mayores; el máximo no puede ser menor que el mínimo y el ancho mayor debe superar al menor. Los extremos iguales están permitidos y producen una regla plana como clamp(1rem, 1rem + 0vw, 1rem).

Un intervalo imposible o un campo de tamaño o de ancho vacío borran la regla, las etiquetas de muestra, la lectura y la vista previa, y desactivan Copy CSS hasta que el intervalo vuelva a ser válido, de modo que el portapapeles nunca recibe una regla que no coincide con los campos en pantalla. El campo de la raíz solo es obligatorio cuando la unidad de salida es rem.