js 라이브러리와 컨테이너의 너비를 기준으로 글꼴 크기 조정

Question

컨테이너의 너비를 기준으로 글꼴 크기 조정을 구현하려고합니다 (내 길이는 한 줄로 작성해야합니다).

<div class="someclass"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h1 class="responsive-headline">LONG TEXT IS 
       LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG</h1> 
       <ul class="breadcrumbs"> 
        ... 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

CSS 스타일 :

.responsive-headline { 
    margin: 0px 0px 3px; 
    color: #fff; 
    text-transform: uppercase; 
    font-size: 32px; 
    letter-spacing: 1.7px; 
    line-height: 1.4; 
} 

확인

다음은 부트 스트랩 3 내 HTML입니다. 의는 FitText.js 라이브러리에서 시작하자 :

jQuery(document).ready(function($) { 
    $('.responsive-headline').fitText(); 
}); 

결과 font-size: 114px;을! 뭐?

$('h1.responsive-headline').fitText(1.2, { minFontSize: '18px', 
maxFontSize: '32px' }); 

결과 font-size: 32px; : 일부 매개 변수를 추가 . 내가 원하는 것보다 좋지만 더 작은 글꼴 크기가 필요합니다. 또한 width: 1000px; display: block; white-space: nowrap;을 h1에 추가하려고 시도했지만 성공하지 못했습니다.

시도한 두 번째 라이브러리는 FlowType.js입니다. 몇 가지 코드를 추가하십시오 :

jQuery(document).ready(function($) { 
    $('h1.responsive-headline').flowtype(); 
}); 

결과 font-size: 32.5714px; 디폴트보다 조금 크다. 그리고와 매개 변수 :

$('h1.responsive-headline').flowtype({ 
    minFont : 12, 
    maxFont : 32 
}); 

결과 font-size: 32px;.

왜 h1은 커지 만 커지지는 않습니까?

Answer 1

(문서) .ready에서 글꼴 크기를 계산했기 때문일 수 있습니다. 보다 역동적 인 크기 조정을 찾고 계신 분이라면 resize() 메소드를 사용해 보시겠습니까? https://api.jquery.com/resize/

나는 오해의 소지가있다.