브라우저 너비에 따른 동적 텍스트 크기 조정
브라우저 너비에 따른 동적 텍스트 크기 조정이 실제로 가능합니다. 방법은 다음과 같습니다.
창 크기 조정 시 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!