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

ブラウザの幅に基づいてテキスト サイズを動的に拡大縮小する

質問:

テクニックはありますかテキスト サイズを自動的に調整して、ブラウザ ウィンドウの幅の希望の比率を維持しながら、スケーリングも行います。

答え:

はい、方法は次のとおりです:

動的なテキストのスケーリングを実現するには、 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>

説明:

• このコードは、jQuery を使用して、ウィンドウの幅。
• setBodyScale 関数は、希望するテキスト サイズに基づいて倍率 (scaleFactor) を計算します。比率 (scaleSource *scaleFactor)。
• 過剰なテキスト サイズを防ぐために、最小および最大スケール制限が適用されます。
• フォント サイズは、body 要素のパーセンテージとして設定され、範囲内のすべてのテキストがスケールされます。 em 単位を使用して定義されます。
• JavaScript イベント ハンドラーにより、ウィンドウのサイズ変更とページの両方でテキスト サイズの調整が行われるようになります。ロードします。

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