Cambio de tamaño de texto dinámico

En su búsqueda por crear una interfaz web responsiva, se ha encontrado con un obstáculo: mientras que las imágenes adaptan su tamaño sin problemas A medida que la ventana cambia de tamaño, el texto permanece obstinadamente fijo. Resolver este problema puede mejorar su experiencia de usuario, asegurando que el contenido de la página siga siendo legible y estéticamente agradable independientemente de las dimensiones de la ventana gráfica.

jQuery al rescate

Si bien es CSS puro ofrece opciones limitadas para cambiar el tamaño del texto, JavaScript, particularmente la biblioteca jQuery, proporciona una solución sencilla. Al aprovechar jQuery, puedes ajustar dinámicamente el tamaño del texto según la altura de la ventana, creando una interfaz verdaderamente fluida y responsiva.

Cómo funciona

El script jQuery monitorea eventos de cambio de tamaño de ventana. Tras la detección, calcula el cambio porcentual en la altura de la ventana en comparación con una altura estándar predefinida en la que el tamaño del texto es óptimo. Luego, este porcentaje se aplica al tamaño de fuente base, lo que resulta en un ajuste proporcional del tamaño de fuente.

Implementación

Incorpore el siguiente código JavaScript en su página:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });
function resizeMe() {
//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);
}

La magia detrás del script

• preferredHeight establece la altura de la ventana base en la que el tamaño de fuente especificado se considera apropiado.
• el porcentaje calcula la relación entre la altura de la ventana actual y la altura preferida.
• newFontSize ajusta el tamaño de fuente original según el porcentaje, lo que garantiza la legibilidad en diferentes tamaños de pantalla.

Conclusión

Armado con este script jQuery, puedes lograr sin esfuerzo un cambio de tamaño de texto dinámico en tu página web. Al escalar dinámicamente el tamaño del texto en respuesta al cambio de tamaño de la ventana, se crea una experiencia fácil de usar que mejora la accesibilidad y la inmersión, independientemente del dispositivo o ventana gráfica.