⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Tamaño de fuente fluida de 16 px a 24 px

Calcule un valor de abrazadera CSS fluido real () a partir de un tamaño mínimo y máximo en dos anchos de ventana gráfica, con la pendiente y la intersección mostradas paso a paso y una vista previa de cambio de tamaño en vivo.

Procesando... 0%

Resultado

Escalar un tamaño de fuente de manera fluida de 16 px a 24 px es una de las preguntas más comunes en las búsquedas de CSS Clamp(), porque 16 px es el valor predeterminado casi universal del texto del cuerpo y 24 px es un paso adelante frecuente para un encabezado o párrafo inicial un poco más grande. Esta página abre la calculadora con exactamente ese par precargado en un rango de ventana gráfica de 320 px a 1280 px, por lo que la línea abrazadera() está lista en el momento en que se carga.

Si solo necesita el equivalente estático de rem o em de 16px o 24px, sin ninguna escala basada en ventana gráfica, el conversor de px a rem responde a eso en un solo paso; esta calculadora es para el caso en el que el valor en sí debería cambiar suavemente a medida que la ventana del navegador cambia de tamaño en lugar de permanecer fijo en un valor rem.

El desglose a continuación muestra exactamente cómo 16px y 24px se convierten en una pendiente, un coeficiente vw y una intersección del eje y, y el control deslizante de vista previa en vivo le permite arrastrar a través del rango de 320 a 1280px para ver cómo el texto crece de un tamaño a otro en tiempo real antes de copiar la línea CSS en su hoja de estilo.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Matemáticas reales de tipografía fluida: la pendiente, el coeficiente vw y la intersección del eje y se muestran explícitamente, no solo la línea final de la abrazadera().
  • Vista previa en vivo: arrastre el control deslizante de ancho de la ventana gráfica para ver cómo cambia el tamaño del texto de muestra exactamente como lo haría mientras se cambia el tamaño de una ventana real del navegador.
  • Modo de escala de tipos: un tamaño de base y una relación de 1,125 a 1,5 generan seis pasos de abrazadera de fluido () (pequeño, base, h4, h3, h2, h1) como CSS listo para copiar.

Beneficios clave

✓ La línea de abrazadera(), los números de pendiente e intersección y la vista previa en vivo se actualizan a medida que escribe, sin necesidad de presionar ningún botón.
✓ Un control deslizante de ancho de ventana gráfica activa un cuadro de vista previa en vivo, para que pueda ver la escala de fluido exacta en acción entre los puntos de interrupción mínimo y máximo, no solo una fórmula.
✓ Un modo de escala de tipos independiente convierte un tamaño y proporción base en una escala de encabezado fluida completa de 6 pasos, lista como un bloque de propiedades personalizadas de CSS.

Casos de uso

  • • Convierta un tamaño de fuente mínimo/máximo y un rango de ventana gráfica en una línea de abrazadera () real (pendiente, coeficiente vw e intersección incluidos) en lugar de mirar uno de un tutorial.
  • • Arrastre un control deslizante de ancho de ventana gráfica para obtener una vista previa de un título fluido o del tamaño del cuerpo cambiando de tamaño exactamente como lo haría mientras se cambia el tamaño de una ventana real del navegador, antes de enviarlo a una hoja de estilo.
  • • Genere una escala de tipo de fluido completa de 6 pasos (de pequeña a h1) a partir de un tamaño y proporción de base, copiada como un bloque listo para pegar de propiedades personalizadas de CSS.
  • • Cree una abrazadera fluida() para el espaciado (margen, relleno, espacio) en lugar del tamaño de fuente; la misma fórmula de pendiente/intersección se aplica a cualquier propiedad CSS.