Generador CSS clamp()
Genera un tamaño fluido CSS clamp() (tipografía responsiva) entre dos anchos de pantalla.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Un tamaño que sigue a la pantalla
Indica el tamaño mín y máx y los anchos de pantalla correspondientes: la herramienta calcula el valor clamp() para pegar en tu CSS, con una vista previa que reacciona al ancho de la ventana.
-
Tamaño mín / máx
P. ej. 16px a 24px.
-
Pantallas de referencia
P. ej. 320px a 1280px.
-
Copia el clamp()
En font-size, padding, etc.
Ejemplo: 16 → 24px (320 → 1280px)
| Dato | Valor |
|---|---|
| Tamaño mín / máx | 16px / 24px = 1rem / 1.5rem |
| Pantallas | 320px → 1280px |
| Pendiente fluida | 0.833vw |
| Resultado | clamp(1rem, 0.833rem + 0.833vw, 1.5rem) |
A 320px el tamaño es 16px, a 1280px es 24px, y varía linealmente entre medias. Cálculo 100 % local.
Preguntas frecuentes
¿Para qué sirve clamp()?
La función CSS clamp(mín, preferido, máx) acota un valor entre un mínimo y un máximo, con un valor preferido que se adapta al ancho de pantalla. Es la forma moderna de hacer tamaños de fuente fluidos sin media queries.
¿Cómo se calcula el valor preferido?
Se traza una recta entre (ancho mín, tamaño mín) y (ancho máx, tamaño máx). La parte central combina una base fija en rem y una pendiente en vw, por ejemplo 0.833rem + 0.833vw, acotada por mín/máx en rem.
¿Por qué mezclar rem y vw?
El vw hace crecer el tamaño con el ancho de la ventana (fluidez); el rem añade una base fija para que la pendiente no parta de cero. La combinación da un crecimiento lineal y legible, respetuoso con el zoom del usuario.
¿Hay que mantener mín y máx?
Sí. Sin límites, el texto sería diminuto en pantallas pequeñas y enorme en muy grandes. clamp() bloquea el valor fuera de tu rango de anchos de referencia.