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

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

질문:

기술이 있나요? 브라우저 창 너비의 원하는 비율을 유지하기 위해 텍스트 크기를 자동으로 조정하고 그에 따라 세로 텍스트 크기도 조정하려면?

답변:

예 , 방법은 다음과 같습니다.

동적 텍스트 크기 조정을 달성하려면 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>

설명:

• 이 코드는 jQuery를 사용하여 창 너비.
• setBodyScale 함수는 원하는 텍스트 크기 비율(scaleSource * scaleFactor)을 기준으로 배율 인수(scaleFactor)를 계산합니다.
• 과도한 텍스트 크기를 방지하기 위해 최소 및 최대 배율 제한을 적용합니다. .
• 글꼴 크기는 본문 요소의 백분율로 설정되며, 본문 요소는 em 단위를 사용하여 정의된 모든 텍스트의 크기를 조정합니다.
• JavaScript 이벤트 핸들러는 텍스트 크기 조정이 발생하는지 확인합니다. 창 크기 조정과 페이지 로드 모두에 적용됩니다.

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