JavaScript を使用してブラウザの幅に基づいてテキスト サイズを動的に拡大縮小するにはどうすればよいですか?

ブラウザの幅に基づく動的なテキスト サイズのスケーリング

問題:

のコンテキスト内プロジェクトでは、テキスト サイズは静的なままであり、垂直方向のテキスト サイズの対応するスケーリングとともに、ブラウザ ウィンドウの幅の約 90% に動的に調整する必要があります。

答え:

JavaScript を使用した本文フォント サイズのスケーリング:

ブラウザ ウィンドウの幅に基づいて本文フォント サイズを設定する JavaScript 関数を実装します。

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

説明:

このスクリプトは、ブラウザ ウィンドウの幅に基づいて body 要素全体のフォント サイズを調整します。倍率とフォント サイズの最小値と最大値は必要に応じてカスタマイズできます。

結果:

このメソッドにより、em 単位で設定されたテキスト要素が動的に拡大縮小されます。ブラウザの幅の約 90% まで拡大し、それに応じて垂直サイズを調整します。

以上がJavaScript を使用してブラウザの幅に基づいてテキスト サイズを動的に拡大縮小するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。