ブラウザの幅に基づいて動的なテキストのスケーリングを実現するにはどうすればよいですか?

ブラウザの幅に応じた動的なテキストのスケーリング

ブラウザの幅に基づいて動的なテキストのスケーリングを実現することは確かに可能です。方法は次のとおりです:

ウィンドウのサイズ変更時に JavaScript を使用してドキュメント本文のフォント サイズを設定します。これは、次の jQuery コードを使用して実現できます。

<code class="javascript">$( document ).ready( function() {
    var $body = $('body'); // Cache this for better performance

    var setBodyScale = function() {
        var scaleSource = $body.width(),
            scaleFactor = 0.35,                     
            maxScale = 600,
            minScale = 30; // Adjust these values to your preference.

        var fontSize = scaleSource * scaleFactor; // Multiply the body width by the scale factor.

        if (fontSize > maxScale) fontSize = maxScale;
        if (fontSize < minScale) fontSize = minScale; // Enforce minimum and maximums.

        $('body').css('font-size', fontSize + '%');
    }

    $(window).resize(function(){
        setBodyScale();
    });

    // Initializing when the page first loads.
    setBodyScale();
});</code>

body 要素のフォント サイズをパーセンテージで設定すると、ems で設定されたテキストを拡大縮小する「ユニバーサル テキスト ズーム」効果が作成されます。必要に応じて、囲む div のフォント サイズのパーセントを設定することで、特定の要素をターゲットにすることもできます。

簡単なデモについては、この例を参照してください: https://www.spookandpuff.com/examples/dynamicTextSize。 html

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