2012-05-04 2 views
0

컨테이너를 채우기 위해 글꼴 크기를 조정하려고합니다. 이것은 혼자서 분명히 문제가되지 않습니다. 그러나 컨테이너도 정적 크기가 아니며 크기가 브라우저 창의 %로 설정되어 있으므로 컨테이너와 함께 브라우저 크기 조정시 글꼴 크기가 동적으로 업데이트되기를 바랍니다.동적 div를 채울 글꼴 크기

브라우저 높이와 너비의 %로 글꼴 크기를 조정 한 수정 된 스크립트를 사용하고있었습니다.

$(document).ready(function() { 
    var $body = $('body'); //Cache this for performance 

    var setBodyScale = function() { 
     var scaleFactor = 0.0001, 
      scaleSource = $(window).height(), 
      scaleSource2 = $(window).width(), 
      maxScale = 200, 
      minScale = 10; 

     var fontSize = (scaleSource * scaleSource2) * scaleFactor; //Multiply the width of the body by the scaling factor: 

     if (fontSize > maxScale) fontSize = maxScale; 
     if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums 

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

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

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

원하는 결과를 얻지 못하고 크기 조정 원본을 창 대신 컨테이너로 변경하려고했습니다. 그러나 다소 동적으로 업데이트되지는 않았으므로 페이지 새로 고침이 필요합니다.

즉, 글꼴 크기를 조정하거나 크기가 브라우저 창의 %로 결정된 컨테이너를 채울 수있는 방법을 찾을 수 없습니다.

답변

1

왜 이미 존재하는 것을 발명 했나요? http://fittextjs.com/

+0

이것은 컨테이너의 너비에 맞게 조정됩니다. 글꼴 크기가 너비 또는 높이에 관계없이 컨테이너의 크기에 맞게 조정되기를 원합니다. – pete

+0

이 스크립트의 제작자에게 문의 할 수 있습니다. 그들은 트위터에있다! https://twitter.com/#!/trentwalton http://twitter.com/davatron5000 http://twitter.com/raygunray –

0

이 실제 답변을하지 않습니다, 그러나, 그러나 뷰포트에 의존 글꼴 크기가 지평선에 있습니다 : :

http://css-tricks.com/viewport-sized-typography/

는 현재에만 지원 있어요 거기에 좋은 jQuery를 도구는 이미있다 크롬 카나리아, 그러나 그것이오고 있다는 것을 알고있는 것이 좋다.