Generador de abrazaderas CSS

Un generador de abrazadera () CSS crea una única declaración de abrazadera (mínimo, preferido, máximo) que escala un valor suavemente entre dos anchos de pantalla. En lugar de escribir varias consultas de medios para pasar de 24px en teléfonos a 48px en escritorios, establece un tamaño mínimo, un tamaño máximo y el rango de ventana gráfica al que se asignan, y el generador devuelve una línea de CSS que interpola cada tamaño intermedio.

La función de abrazadera () toma tres argumentos: un límite inferior, un valor preferido y un límite superior. El navegador utiliza el valor preferido a menos que caiga por debajo del mínimo o por encima del máximo, en cuyo caso se bloquea en ese límite. Este generador calcula el valor preferido como una función lineal de la ventana gráfica, combinando un término rem fijo con un término vw, por lo que el resultado crece al mismo ritmo que la ventana sin caer nunca por debajo de su mínimo ni exceder su máximo. Esta técnica a menudo se denomina tipografía fluida, aunque funciona igualmente bien para márgenes, acolchados, espacios y anchos.

Todo se calcula en su navegador con JavaScript del lado del cliente, por lo que no se carga nada de lo que ingresa y la herramienta funciona sin conexión una vez cargada. Puede ingresar tamaños en píxeles o rem, establecer un tamaño de fuente raíz personalizado y leer una tabla de vista previa que muestra el valor calculado en anchos de ventana gráfica comunes, para que pueda confirmar que la curva se comporta antes de pegar la abrazadera () en su hoja de estilo.

El tamaño fluido tiene una trampa de accesibilidad que vale la pena evitar deliberadamente. Una expresión de abrazadera cuyo término medio se expresa exclusivamente en unidades de ventana gráfica ignora la configuración del tamaño de fuente del lector, porque vw no responde a ella y el texto que no puede crecer falla WCAG 1.4.4. Mantener un componente rem en el valor preferido, que es lo que hace la salida generada, significa que el tamaño aún responde al zoom del navegador y a una fuente predeterminada más grande. Establezca siempre ambos límites: sin ellos el valor escala sin límite en cualquier dirección.

Aquí está el generador de abrazaderas CSS en un encabezado real. Ingrese 24 y 48 px como tamaños, 360 y 1440 como ventanas gráficas, mantenga la raíz de 16 px y presione Generar abrazadera (). La salida es el tamaño de fuente: abrazadera (1,5rem, 1rem + 2,2222vw, 3rem);. La tabla de vista previa lo confirma: 24px a 360, 33,07px a 768, 38,76px a 1024 y 48px a 1440. Por debajo de 360 el encabezado permanece en 1,5rem y por encima de 1440 se detiene en 3rem, que es el punto completo de la tipografía fluida con límites.