Comment puis-je adapter dynamiquement la taille du texte en fonction de la largeur du navigateur à l'aide de JavaScript ?

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

Problème :

Dans le contexte de un projet, la taille du texte reste statique et doit être ajustée dynamiquement à environ 90 % de la largeur de la fenêtre du navigateur, avec une mise à l'échelle correspondante de la taille verticale du texte.

Réponse :

Mise à l'échelle de la taille de la police du corps à l'aide de JavaScript :

Implémentez une fonction JavaScript qui définit la taille de la police du corps en fonction de la largeur de la fenêtre du navigateur.

<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 script ajuste la taille de la police de l'ensemble de l'élément body en fonction de la largeur de la fenêtre du navigateur. Le facteur de mise à l'échelle et les valeurs de taille de police minimale et maximale peuvent être personnalisés à votre guise.

Résultat :

Cette méthode garantit que les éléments de texte, définis en unités em, sont mis à l'échelle dynamiquement. à environ 90 % de la largeur du navigateur et ajustez leur taille verticale en conséquence.

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!