Ejemplos
font-size: clamp(1rem, 2.5vw, 3rem); — Tipografía fluida para títulospadding: clamp(1rem, 5vw, 3rem); — Espaciado responsive en seccioneswidth: clamp(300px, 80vw, 1200px); — Contenedor fluidogap: clamp(0.5rem, 2vw, 2rem); — Espaciado en grid o flexboxfont-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem); — Texto de párrafo adaptativo
Preguntas frecuentes
¿CSS clamp() funciona en todos los navegadores?
Sí, clamp() tiene soporte universal desde 2020: Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+. No necesitás prefijos ni fallbacks para navegadores modernos. Si debés soportar IE11, usá PostCSS con autoprefixer o fallbacks manuales con media queries.
¿Cuál es la diferencia entre clamp(), min() y max()?
min() devuelve el menor de los valores, max() el mayor, y clamp() acota entre dos límites. Ejemplo: min(2rem, 5vw) siempre devuelve el más chico de esos dos. clamp(1rem, 5vw, 3rem) devuelve 5vw solo si está entre 1rem y 3rem, sino devuelve el límite.
¿Cómo calculo los valores correctos para clamp()?
Usá un generador de clamp() que te calcule la fórmula automáticamente basándose en tamaños mínimos y máximos deseados para viewports específicos. La fórmula manual es compleja: (MAX - MIN) / (VP_MAX - VP_MIN) * 100vw + valor de ajuste. El generador de Genfy hace esto por vos.