JavaScript を使用してブラウザの幅に基づいてテキストサイズを動的に拡大縮小するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-10-30 06:08:28

オリジナル

1083 人が閲覧しました

How can I dynamically scale text size based on browser width using 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 サイトの他の関連記事を参照してください。