Wie kann ich die Textgröße mithilfe von JavaScript basierend auf der Browserbreite dynamisch skalieren?

Dynamische Skalierung der Textgröße basierend auf der Browserbreite

Problem:

Im Kontext von Bei einem Projekt bleibt die Textgröße statisch und muss dynamisch auf etwa 90 % der Breite des Browserfensters angepasst werden, mit entsprechender Skalierung der vertikalen Textgröße.

Antwort:

Skalieren der Schriftgröße des Textkörpers mithilfe von JavaScript:

Implementieren Sie eine JavaScript-Funktion, die die Schriftgröße des Textkörpers basierend auf der Breite des Browserfensters festlegt.

<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>

Erklärung:

Dieses Skript passt die Schriftgröße des gesamten Textelements basierend auf der Breite des Browserfensters an. Der Skalierungsfaktor sowie die minimalen und maximalen Werte für die Schriftgröße können nach Wunsch angepasst werden.

Ergebnis:

Diese Methode stellt sicher, dass Textelemente, die in Em-Einheiten festgelegt sind, dynamisch skaliert werden auf ca. 90 % der Browserbreite aus und passen Sie ihre vertikale Größe entsprechend an.

Das obige ist der detaillierte Inhalt vonWie kann ich die Textgröße mithilfe von JavaScript basierend auf der Browserbreite dynamisch skalieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!