ウィンドウのサイズ変更時にテキスト要素のサイズを動的に拡大縮小する方法

ウィンドウのサイズ変更によるテキストの拡大縮小

Web デザインの世界では、応答性が画像を超えて拡張されることがよくあります。ユーザーがブラウザ ウィンドウのサイズを変更するときは、画像だけでなくテキスト要素もそれに応じてサイズを調整することが望ましいです。

この課題に対する一般的なアプローチの 1 つは、CSS を使用することです。イメージは、background-size: contains などのテクニックを使用して、アスペクト比を維持し、ウィンドウに合わせてスケールするように簡単に設定できます。ただし、テキストに対してこの機能を複製するのはさらに難しいことがわかります。

テキストの動的なスケーリングを実現するには、jQuery を使用した JavaScript ソリューションの実装を検討してください。 body 要素の基本フォント サイズを設定し、他のすべてのフォント サイズを基本のパーセンテージで表すことにより、ウィンドウのサイズ変更時に基本フォント サイズを動的に調整できます。この波及効果により、ページ上のすべてのテキスト サイズが自動的に更新されます。

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

<code class="javascript">$(function() {
    $(window).bind('resize', function() {
        resizeMe();
    }).trigger('resize');
});

function resizeMe() {
    //Standard height, for which the body font size is correct
    var preferredHeight = 768;
    //Base font size for the page
    var fontsize = 18;

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

このスクリプトを適切に配置すると、Web ページのテキスト要素がシームレスに更新されます。ユーザーがブラウザ ウィンドウのサイズを変更するのに合わせてサイズを調整します。

以上がウィンドウのサイズ変更時にテキスト要素のサイズを動的に拡大縮小する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。