반응형 웹 페이지의 텍스트 크기 자동 조정

반응형 웹 페이지를 디자인할 때 텍스트를 포함한 모든 요소가 다양한 텍스트에 맞게 원활하게 조정되도록 합니다. 창 크기는 최적의 사용자 경험에 매우 중요합니다. 이 가이드에서는 CSS와 jQuery의 조합을 사용하여 텍스트 크기를 자동으로 조정하는 방법을 보여줍니다.

시작하려면 CSS를 사용하여 본문 요소의 기본 글꼴 크기를 설정하세요. 예:

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);
}

이 스크립트는 창 크기가 조정될 때 기본 글꼴 크기를 조정하고 결과적으로 다른 모든 글꼴 크기도 조정합니다. 결과적으로 창 크기가 변경되는 동안 텍스트 크기가 원활하게 조정되어 사용자에게 다양한 장치 및 화면 해상도에서 일관되고 편안한 읽기 환경을 제공합니다.