Comment puis-je adapter dynamiquement la taille du texte en fonction de la largeur du navigateur ?

Mise à l'échelle dynamique de la taille du texte en fonction de la largeur du navigateur

Question :

Existe-t-il une technique pour ajuster automatiquement la taille du texte afin de conserver une proportion souhaitée de la largeur de la fenêtre du navigateur, tout en redimensionnant la taille verticale du texte en conséquence ?

Réponse :

Oui , voici comment :

Pour obtenir la mise à l'échelle dynamique du texte, vous pouvez utiliser JavaScript pour manipuler la taille de la police du corps en fonction de la largeur de la fenêtre. Le code JavaScript suivant illustre cette approche :

<code class="javascript">$(document).ready(function() {
  var $body = $('body');

  var setBodyScale = function() {
    var scaleSource = $body.width(),
      scaleFactor = 0.35,
      maxScale = 600,
      minScale = 30;

    var fontSize = scaleSource * scaleFactor;

    if (fontSize > maxScale) fontSize = maxScale;
    if (fontSize < minScale) fontSize = minScale;

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

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

  // Fire it when the page first loads:
  setBodyScale();
});</code>

Explication :

• Ce code utilise jQuery pour définir la taille de la police de l'élément body en fonction du largeur de la fenêtre.
• La fonction setBodyScale calcule le facteur de mise à l'échelle (scaleFactor) en fonction de la proportion de taille de texte souhaitée (scaleSource * scaleFactor).
• Elle applique des limites d'échelle minimales et maximales pour éviter des tailles de texte excessives. .
• La taille de la police est définie en pourcentage de l'élément body, ce qui met à l'échelle tout le texte défini à l'aide d'unités em.
• Les gestionnaires d'événements JavaScript garantissent que l'ajustement de la taille du texte se produit. sur le redimensionnement de la fenêtre et le chargement de 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!