Calculadora de abrazadera CSS ()

La abrazadera CSS (MIN, PREFERRED, MAX) permite que una declaración reemplace una pila completa de consultas de medios: el valor permanece en MIN debajo de la ventana gráfica más pequeña, en MAX encima de la más grande y escala suavemente en el medio. La parte difícil es el término PREFERIDO (una expresión relativa a la ventana gráfica como 0,833rem + 0,833vw) que nadie quiere derivar a mano. Esta calculadora lo calcula de verdad a partir de cuatro números: un tamaño mínimo, un tamaño máximo y el ancho de la ventana gráfica al que se aplica cada uno.

Se muestra cada número intermedio, no solo la línea final: la pendiente (cuántas unidades de tamaño crece el valor por píxel de la ventana gráfica), esa misma pendiente expresada como un coeficiente vw y la intersección del eje y, la constante agregada al término vw para que la línea pase exactamente por los dos puntos que especificó. Cualquiera que haya pegado un valor de abrazadera() de un tutorial sin entenderlo puede ver y comprobar la aritmética real aquí.

Un control deslizante de ancho de ventana gráfica activa un cuadro de vista previa en vivo, por lo que la escala fluida es visible, no solo calculada: arrástrelo entre los puntos de interrupción mínimo y máximo y observe cómo el texto de muestra cambia de tamaño exactamente como lo haría mientras se cambia el tamaño de una ventana real del navegador. La línea de salida y el desglose se actualizan con cada pulsación de tecla; esto se combina naturalmente con el convertidor de px a rem cuando el tamaño de fuente base también necesita convertirse.

Cambie al modo de escala de texto para obtener un sistema de tipografía fluido completo en un solo paso: ingrese un tamaño base y una proporción modular (1,125 hasta 1,5) y obtenga seis tamaños (pequeño, base, h4, h3, h2 y h1), cada uno calculado como su propia línea de abrazadera() entre una progresión móvil más suave y la proporción completa del escritorio, listo para copiar como un bloque de propiedades personalizadas de CSS.