Calculadora de CSS clamp()
Define un tamaño para pantallas pequeñas y otro para grandes y obtén un valor clamp() fluido que escala con suavidad entre ambos — para tamaños de fuente, padding, márgenes o gaps.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)El resultado conserva una parte en rem en el término central, así el texto sigue creciendo cuando alguien amplía al 200%; un valor solo de viewport no lo haría.
Texto fluido, con el tamaño justo.
El cálculo se hace por completo en tu navegador. Nada de lo que escribes aquí se sube a BroBroGo.
Preguntas frecuentes
¿Cómo construye la calculadora el valor clamp()?
Le das dos puntos: un tamaño a un ancho de pantalla pequeño y otro a uno grande. Traza una línea recta entre ellos, de modo que el tamaño crece con suavidad al ensancharse la pantalla, y lo envuelve en clamp() para que nunca baje de tu tamaño pequeño ni supere el grande. Entre los dos anchos el tamaño escala de forma fluida; fuera de ellos se queda en el límite más cercano.
¿Por qué el resultado viene en rem y vw en lugar de píxeles?
Los límites van en rem y la parte central que cambia conserva un componente en rem, así el texto sigue creciendo cuando alguien amplía la página o sube el tamaño de fuente por defecto del navegador; un valor solo en píxeles o solo en unidades de viewport podría impedirlo. Introduces los tamaños en píxeles porque es lo natural, y la herramienta los convierte a rem con tu tamaño de fuente raíz.
¿Puedo usarlo para espaciado y no solo para el tamaño de fuente?
Sí. El mismo valor sirve para padding, margin, gap, ancho o alto: en cualquier lugar donde vaya una longitud. Cambia la vista previa a «Caja» para ver crecer el espaciado en vez del texto. Si tu tamaño pequeño y el grande coinciden, el resultado se reduce a una longitud fija, porque no hay nada que escalar.
¿Todos los navegadores admiten clamp()?
Sí: todos los navegadores actuales admiten clamp() desde 2020, así que puedes usar el valor tal cual, sin alternativa de reserva. Con un máximo muy alto o un cambio muy rápido, conviene comprobar al 200% de zoom que el texto sigue agrandándose para quien lo necesite.