Redimensionnement dynamique du texte

Dans votre quête pour créer une interface Web réactive, vous avez rencontré un obstacle : alors que les images adaptent leur taille de manière transparente à mesure que la fenêtre se redimensionne, le texte reste obstinément fixe. La résolution de ce problème peut améliorer votre expérience utilisateur, en garantissant que le contenu de la page reste lisible et esthétique quelles que soient les dimensions de la fenêtre d'affichage.

jQuery à la rescousse

Bien que du CSS pur offre des options limitées pour redimensionner le texte, JavaScript, en particulier la bibliothèque jQuery, fournit une solution simple. En tirant parti de jQuery, vous pouvez ajuster dynamiquement la taille du texte en fonction de la hauteur de la fenêtre, créant ainsi une interface véritablement fluide et réactive.

Comment ça marche

Le script jQuery surveille événements de redimensionnement de fenêtre. Lors de la détection, il calcule le pourcentage de variation de la hauteur de la fenêtre par rapport à une hauteur standard prédéfinie à laquelle la taille du texte est optimale. Ce pourcentage est ensuite appliqué à la taille de police de base, ce qui entraîne un ajustement proportionnel de la taille de la police.

Mise en œuvre

Incorporez le code JavaScript suivant dans votre page :

$(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 magie derrière le script

• preferredHeight définit la hauteur de fenêtre de base à laquelle la taille de police spécifiée est considérée comme appropriée.
• le pourcentage calcule le rapport entre la hauteur actuelle de la fenêtre et la hauteur préférée.
• newFontSize ajuste la taille de la police d'origine en fonction du pourcentage, garantissant ainsi la lisibilité sur différentes tailles d'écran.

Conclusion

Armé de ce script jQuery, vous pouvez facilement réaliser un redimensionnement dynamique du texte dans votre page Web. En redimensionnant dynamiquement la taille du texte en réponse au redimensionnement de la fenêtre, vous créez une expérience conviviale qui améliore l'accessibilité et l'immersion, quel que soit l'appareil ou la fenêtre d'affichage.