レスポンシブ Web ページのテキストの自動サイズ変更

レスポンシブ Web ページをデザインするときは、テキストを含むすべての要素がシームレスに調整されるようにします。ウィンドウ サイズは、最適なユーザー エクスペリエンスにとって非常に重要です。このガイドでは、CSS と jQuery を組み合わせてテキストの自動サイズ変更を実現する方法を説明します。

まず、CSS を使用して body 要素の基本フォント サイズを設定します。例:

body {
    font-size: 18px;
}

次に、パーセントを使用して、本文のフォント サイズに対する他の要素のフォント サイズを定義します。例:

h1 {
    font-size: 150%;
}
p {
    font-size: 120%;
}

ウィンドウのサイズ変更を処理するには、jQuery スクリプトを使用します。以下のコードは、基本フォント サイズを動的に変更します。

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

function resizeMe() {
    // Calculate the new body font size based on the window height
    var standardHeight = 768; // Standard height for which body font size is defined
    var baseFontSize = 18;
    var windowHeight = $(window).height();
    var percentage = windowHeight / standardHeight;
    var newBodyFontSize = Math.floor(baseFontSize * percentage) - 1;

    // Set the new font size for the body element
    $("body").css("font-size", newBodyFontSize);
}

このスクリプトは、ウィンドウのサイズが変更されたときに、基本フォント サイズを調整し、その結果、他のすべてのフォント サイズも調整します。その結果、ウィンドウ サイズの変更時にテキストがスムーズに拡大縮小され、さまざまなデバイスや画面解像度にわたって一貫した快適な読書体験がユーザーに提供されます。