clamp() y tamaño fluido

clamp() permite que una declaración reemplace muchas media queries escalonadas para propiedades numéricas como font-size, padding, gap y height.

Sintaxis

clamp(MIN, PREFERRED, MAX)

El navegador elige:

• MIN cuando el valor preferido sería demasiado pequeño
• MAX cuando el valor preferido sería demasiado grande
• PREFERRED en caso contrario

Ejemplo:

h1 {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

En pantallas estrechas el título permanece al menos en 1.5rem. En pantallas anchas se limita a 2.5rem. Entre esos límites crece con el ancho del viewport.

Por qué rem + vw juntos

Un encabezado solo con vw puede volverse ilegible en móvil o excesivamente grande en monitores ultrawide. Combinar rem con vw dentro de clamp() da:

• Suelo de accesibilidad vía mínimo rem
• Techo de layout vía máximo rem
• Crecimiento fluido vía término medio vw

Modo font-size vs espaciado

El clamp de font-size afecta ritmo de texto y salto de línea. El clamp de espaciado afecta gaps de sección, padding hero o altura de componente.

Ambos usan la misma matemática, pero la vista previa difiere:

• La vista previa de font-size muestra texto de muestra en tamaños calculados
• La vista previa de espaciado muestra barras o bloques en alturas calculadas

Previsualiza siempre en anchos de viewport mínimo, medio y máximo antes de publicar.

De especificación de diseño a CSS

Flujo típico:

1. El diseñador da tamaños px mínimo y máximo para móvil y escritorio.
2. Elige el rango de viewport que coincide con tus breakpoints de layout.
3. Genera clamp(minRem, preferredRem + preferredVw, maxRem).
4. Copia CSS, una propiedad personalizada o variable SCSS en tokens.

Ejemplo de salida:

--heading-lg: clamp(1rem, 0.5rem + 2vw, 1.5rem);

Cuándo no usar clamp()

• Valores que deben encajar exactamente en un breakpoint para reflow de layout
• Propiedades controladas por container queries con reglas muy distintas
• Casos donde basta un token rem simple

clamp() es mejor cuando quieres escalado suave entre límites conocidos.

Conclusión clave

Piensa en clamp() como tamaño fluido acotado: tamaño mínimo legible, tamaño máximo de diseño y crecimiento impulsado por viewport en medio.

Genera y previsualiza valores clamp en la pestaña clamp del Conversor de unidades CSS / Generador clamp antes de añadirlos a tu hoja de estilos.