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

Generador de escala de tipo fluido

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

Esta página abre la calculadora directamente en modo de escala tipográfica con una base de 16 píxeles y una proporción de 1,25 (tercio mayor) ya seleccionada: un punto de partida sólido y ampliamente utilizado para una escala tipográfica. Solo a partir de esos dos números, se generan seis tamaños: pequeño, base, h4, h3, h2 y h1, cada uno con su propio valor de abrazadera de fluido () en lugar de un único tamaño fijo.

Cada paso mantiene el tamaño base anclado en el mismo valor tanto en el extremo móvil como en el de escritorio, mientras que los encabezados se escalan de manera más agresiva en la ventana gráfica de escritorio más amplia que en la ventana móvil estrecha: la misma idea que elegir una proporción más suave para pantallas pequeñas y una más audaz para pantallas grandes, derivada automáticamente de la proporción única que elija.

Cambiar la proporción a 1.125, 1.2, 1.333 o 1.5 regenera toda la tabla instantáneamente, y el botón debajo copia los seis valores de abrazadera() como un bloque listo para pegar de propiedades personalizadas CSS para que el resto de la hoja de estilo haga referencia.

🛡️
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.