08 · Clamp
Clamp
Valores responsive sin media queries
Tipografía fluida
Este texto escala sin media queries
Con clamp(1rem, 4vw, 3rem) el tamaño crece con el viewport, con un mínimo y máximo de seguro.
font-size: clamp(1rem, 4vw, 3rem)
Espaciado fluido
A
B
C
El gap también puede ser fluido: clamp(8px, 2vw, 24px).
gap: clamp(8px, 2vw, 24px)
Layout responsive
El ancho de esta caja se ajusta con clamp() en lugar de breakpoints.
Ancho fluido: 280px ↔ 600px
width: clamp(280px, 50vw, 600px)
/* tipografía fluida — sin media queries */
.clamp-text {
font-size: clamp(1rem, 4vw, 3rem);
}
/* espaciado fluido entre elementos */
.clamp-gap {
display: flex;
gap: clamp(8px, 2vw, 24px);
}
/* ancho fluido de un contenedor */
.clamp-width {
width: clamp(280px, 50vw, 600px);
}Nota honesta sobre soporte
Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.