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

Textgröße basierend auf der Browserbreite dynamisch skalieren

Frage:

Gibt es eine Technik? um die Textgröße automatisch anzupassen, um einen gewünschten Anteil der Breite des Browserfensters beizubehalten und gleichzeitig die vertikale Textgröße entsprechend zu skalieren?

Antwort:

Ja , so geht's:

Um die dynamische Textskalierung zu erreichen, können Sie JavaScript verwenden, um die Schriftgröße des Textkörpers basierend auf der Fensterbreite zu manipulieren. Der folgende JavaScript-Code demonstriert diesen Ansatz:

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

• Dieser Code verwendet jQuery, um die Schriftgröße des Body-Elements basierend auf dem festzulegen Fensterbreite.
• Die Funktion setBodyScale berechnet den Skalierungsfaktor (scaleFactor) basierend auf dem gewünschten Textgrößenverhältnis (scaleSource * scaleFactor).
• Sie erzwingt minimale und maximale Skalierungsgrenzen, um übermäßige Textgrößen zu verhindern .
• Die Schriftgröße wird als Prozentsatz des Body-Elements festgelegt, das den gesamten darin enthaltenen Text skaliert, der mit em-Einheiten definiert ist.
• Die JavaScript-Ereignishandler stellen sicher, dass die Anpassung der Textgröße erfolgt sowohl bei der Fenstergröße als auch beim Laden der Seite.

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