Comment puis-je obtenir une mise à l'échelle dynamique du texte en fonction de la largeur du navigateur ?

Mise à l'échelle dynamique du texte avec la largeur du navigateur

Réaliser une mise à l'échelle dynamique du texte basée sur la largeur du navigateur est en effet possible. Voici comment :

Définissez la taille de la police du corps de votre document à l'aide de JavaScript lors du redimensionnement de la fenêtre. Ceci peut être réalisé en utilisant le code jQuery suivant :

<code class="javascript">$( document ).ready( function() {
    var $body = $('body'); // Cache this for better performance

    var setBodyScale = function() {
        var scaleSource = $body.width(),
            scaleFactor = 0.35,                     
            maxScale = 600,
            minScale = 30; // Adjust these values to your preference.

        var fontSize = scaleSource * scaleFactor; // Multiply the body width by the scale factor.

        if (fontSize > maxScale) fontSize = maxScale;
        if (fontSize < minScale) fontSize = minScale; // Enforce minimum and maximums.

        $('body').css('font-size', fontSize + '%');
    }

    $(window).resize(function(){
        setBodyScale();
    });

    // Initializing when the page first loads.
    setBodyScale();
});</code>

En définissant la taille de la police de l'élément body en pourcentage, vous créez un effet de "zoom de texte universel", mettant à l'échelle n'importe quel texte défini en ems. Si vous le souhaitez, vous pouvez également cibler des éléments spécifiques en définissant le pourcentage de taille de police sur un div englobant.

Pour une démonstration rapide, visitez cet exemple : https://www.spookandpuff.com/examples/dynamicTextSize. html

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!