JavaScript를 사용하여 브라우저 너비에 따라 텍스트 크기를 동적으로 조정하려면 어떻게 해야 합니까?

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

문제:

다음과 같은 맥락에서 프로젝트에서 텍스트 크기는 정적으로 유지되며 세로 텍스트 크기의 해당 배율을 사용하여 브라우저 창 너비의 약 90%로 동적으로 조정되어야 합니다.

답변:

JavaScript를 사용하여 본문 글꼴 크기 조정:

브라우저 창 너비에 따라 본문 글꼴 크기를 설정하는 JavaScript 함수를 구현합니다.

<code class="javascript">$(document).ready(function() {
  var $body = $('body');

  var setBodyScale = function() {
    var scaleSource = $body.width(),
      scaleFactor = 0.35,
      maxScale = 600,
      minScale = 30;

    var fontSize = scaleSource * scaleFactor;

    if (fontSize > maxScale) fontSize = maxScale;
    if (fontSize < minScale) fontSize = minScale;

    $body.css('font-size', fontSize + '%');
  }

  $(window).resize(function() {
    setBodyScale();
  });

  // Fire it when the page first loads:
  setBodyScale();
});</code>

설명:

이 스크립트는 브라우저 창의 너비에 따라 전체 본문 요소의 글꼴 크기를 조정합니다. 배율 인수와 최소 및 최대 글꼴 크기 값은 원하는 대로 사용자 정의할 수 있습니다.

결과:

이 방법을 사용하면 em 단위로 설정된 텍스트 요소의 크기가 동적으로 조정됩니다. 브라우저 너비의 약 90%로 설정하고 이에 따라 세로 크기를 조정하세요.

위 내용은 JavaScript를 사용하여 브라우저 너비에 따라 텍스트 크기를 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!