Comment pouvez-vous réaliser un redimensionnement dynamique du texte en réponse aux ajustements de fenêtre à l'aide de CSS et JavaScript ?

Redimensionnement dynamique du texte lors du redimensionnement de la fenêtre : une solution CSS et JavaScript

Face au défi de redimensionner de manière fluide le texte d'une page Web avec redimensionnement de la fenêtre, on pourrait dans un premier temps envisager CSS. Bien qu'efficace pour les images, le CSS seul peut ne pas suffire pour le texte.

Pour résoudre ce problème, une combinaison de CSS et de JavaScript offre une solution robuste. En définissant une taille de police de base en CSS et des pourcentages pour les autres tailles, nous pouvons garantir que toutes les tailles d'éléments s'ajustent proportionnellement.

Ensuite, nous utilisons un script jQuery pour surveiller les redimensionnements des fenêtres. Lors de la détection, le script réajuste la taille de police de base et les autres tailles d'éléments emboîtent le pas.

Voici un exemple de script jQuery qui y parvient :

$(function() {
    $(window).bind('resize', function() {
        resizeMe();
    }).trigger('resize');
});

Et dans la fonction 'resizeMe' , nous utilisons le code suivant :

var preferredHeight = 768; // Standard height for correct body font size
var fontsize = 18; // Base font size

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

Ce script ajuste la taille de la police de l'élément 'body' en fonction de la hauteur de la fenêtre, garantissant une expérience de mise à l'échelle dynamique et conviviale sans nécessiter de zoom manuel sur la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!