Tool Hub

CSS clamp()

Fuente mín/máx · viewport → fórmula clamp() responsiva

Preview viewport: 800px

The quick brown fox jumps over the lazy dog.

24.00px @ 800px

CSS
font-size: clamp(1.000rem, 1.6667vw + 0.6667rem, 2.000rem);

Cómo usar

  1. Ingrese el tamaño de fuente mínimo en píxeles y el tamaño de fuente máximo en píxeles.
  2. Ingrese el ancho de ventana gráfica mínimo y el ancho de ventana gráfica máximo donde esos tamaños de fuente se aplican.
  3. Arrastre el control deslizante de vista previa para simular cómo se escala la fuente en diferentes anchos de ventana gráfica y lea el valor de píxel en vivo.
  4. Copie la expresión clamp() generada y péguala en su CSS.

Ejemplos

  • Fuente mínima 16 px, fuente máxima 32 px, ventana gráfica mínima 320 px, ventana gráfica máxima 1280 px produce clamp(16px, 1.667vw + 10.667px, 32px).
  • En una vista previa de ventana gráfica de 800 px, la pantalla en vivo muestra aproximadamente 23 px, confirmando escala suave entre los dos extremos.

Verifica las salidas antes de usar en producción. Sin garantía — ver Términos.