Calculadora CSS clamp
Con esta calculadora CSS clamp conviertes un valor mínimo, uno máximo y un rango de viewport en la expresión clamp() lista para fuentes, espaciados y anchos, sin media queries.
Ejemplo: Propiedad CSS: font-size · Valor más pequeño (móvil) 16 px · Valor más grande (escritorio) 24 px · Desde el ancho de viewport 320 px · Hasta el ancho de viewport 1280 px · Tamaño de fuente base (rem) 16 px → CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Fuente: MDN – CSS clamp(): clamp(MIN, VAL, MAX). Actualizado: .
Cómo se calcula
clamp(MIN, VAL, MAX) limita un valor por abajo y por arriba. Para un texto que crece de 16 a 24 px entre 320 px y 1280 px de ancho, queda: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Cómo se calcula
Entre los dos anchos de viewport el valor sube linealmente. La pendiente es (máx − mín) / (viewportmáx − viewportmín), la ordenada en el origen mín − pendiente · viewportmín. La ordenada va en rem y la pendiente en vw, de modo que una fuente del navegador ampliada por el usuario sigue contando. La tabla muestra el valor en dispositivos habituales.
Conviene saber
- Los tamaños de fuente solo en vw, sin parte en rem, apenas se pueden ampliar con el zoom; por eso la expresión incluye una parte rem.
- clamp() sirve también para padding, margin, gap y width, en cualquier sitio donde haya una longitud.
- Todos los navegadores actuales admiten clamp() (desde 2020).
Preguntas frecuentes
¿Cómo calculo clamp() para tamaños de fuente?
Introduce el tamaño mínimo y máximo en px y los anchos de viewport. La calculadora forma el valor preferido con rem y vw y lo sitúa entre mínimo y máximo.
¿Por qué la expresión lleva una parte en rem?
Un valor solo en vw ignora el tamaño de fuente del navegador. Con una parte en rem, el texto sigue escalando para quien usa una fuente mayor.
¿Puedo usar clamp() para espaciados?
Sí, para cualquier propiedad CSS con valor de longitud, como padding, margin, gap o width.
¿Qué significa 1.5rem al final?
El máximo: a partir del ancho superior el texto deja de crecer. Con base de 16 px, 1,5 rem son exactamente 24 px.
Fuentes y base legal
- MDN – CSS clamp(): clamp(MIN, VAL, MAX)
- W3C – CSS Values and Units Module Level 4: Mathematical Expressions (min(), max(), clamp())
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (el texto debe poder ampliarse hasta el 200 %)
Última actualización: · Principios editoriales
Herramientas relacionadas
- Convertir px a remConvertir px a rem con tu propio tamaño base, además de em, pt, porcentaje y vw, y una tabla de tamaños de fuente habituales. Gratis y sin registrarse.
- Generador de degradados CSSCrea degradados CSS: lineales, radiales o cónicos, con los puntos de color que quieras, ángulo y color de respaldo. Vista previa y CSS listo para copiar.
- Generador de box-shadow CSSCrea sombras CSS con controles: varias sombras, desplazamiento, desenfoque, expansión, color con transparencia, inset y plantillas. Vista previa y CSS listo.
- Generador de border-radius CSSRedondea esquinas con controles: todas a la vez o una por una, en px o %, elípticas con 8 valores; forma abreviada más corta, vista previa y CSS listo.
- Combinar tipografías: pares para títulos y textoPares de fuentes para títulos y texto con vista previa en vivo, CSS para copiar y disponibilidad en Windows, Mac, iPhone y Android, solo fuentes del sistema.
- Comprobador de contraste de colores según WCAG 2.2Comprueba el contraste entre el color del texto y el del fondo: relación de contraste WCAG 2.2, niveles AA/AAA para texto normal, texto grande y componentes.
- Cuál es mi dirección IPMuestra al instante tu dirección IP pública, detecta si es IPv4 o IPv6 y explica la diferencia. Gratis: tu IP no se guarda.
- Validar CUIT y CUIL: comprobá el dígito o calculalo con el DNIValidar CUIT o CUIL online: pegá las 11 cifras y comprobá el dígito verificador, o escribí el DNI y el sexo y calculá el CUIL con el método módulo 11.
- Calcular letra DNI y NIE al instanteCalcular letra DNI online: escribe las 8 cifras y obtén la letra del NIF; también para NIE (X, Y, Z). Comprueba si la letra es correcta. Sin registro.