브라우저 너비에 따라 동적 텍스트 크기 조정을 어떻게 달성할 수 있습니까?

브라우저 너비에 따른 동적 텍스트 크기 조정

브라우저 너비에 따른 동적 텍스트 크기 조정이 실제로 가능합니다. 방법은 다음과 같습니다.

창 크기 조정 시 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>

본문 요소의 글꼴 크기를 백분율로 설정하면 "범용 텍스트 확대/축소" 효과를 만들어 ems에 설정된 모든 텍스트의 크기를 조정할 수 있습니다. 원하는 경우 둘러싸는 div에서 글꼴 크기 비율을 설정하여 특정 요소를 타겟팅할 수도 있습니다.

빠른 시연을 보려면 https://www.spookandpuff.com/examples/dynamicTextSize 예를 참조하세요. HTML

위 내용은 브라우저 너비에 따라 동적 텍스트 크기 조정을 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!