CSS と JavaScript を使用してウィンドウの調整に応じて動的なテキストのサイズ変更を実現するにはどうすればよいでしょうか?

ウィンドウのサイズ変更中の動的テキストのサイズ変更: CSS と JavaScript のソリューション

Web ページのテキストのサイズを流動的に変更するという課題に直面したときウィンドウのサイズを変更する場合、最初は CSS を検討するかもしれません。画像には効果的ですが、CSS だけではテキストには十分ではない可能性があります。

この問題に対処するには、CSS と JavaScript を組み合わせて堅牢なソリューションを提供します。 CSS で基本フォント サイズと他のサイズのパーセンテージを設定することで、すべての要素のサイズが比例して調整されるようにすることができます。

次に、jQuery スクリプトを利用してウィンドウのサイズ変更を監視します。検出されると、スクリプトは基本フォント サイズを再調整し、他の要素のサイズもそれに合わせて調整します。

これを実現する jQuery スクリプトの例を次に示します。

$(function() {
    $(window).bind('resize', function() {
        resizeMe();
    }).trigger('resize');
});

そして、「resizeMe」関数内では、次のコードを使用します:

var preferredHeight = 768; // Standard height for correct body font size
var fontsize = 18; // Base font size

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);

このスクリプトは、ウィンドウの高さに基づいて「body」要素のフォント サイズを調整し、手動でページをズームすることなく、動的でユーザーフレンドリーな拡大縮小エクスペリエンスを保証します。

以上がCSS と JavaScript を使用してウィンドウの調整に応じて動的なテキストのサイズ変更を実現するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。