填充動態div的字體大小

我試圖讓字體大小調整爲填充容器。這顯然不是問題。但是，容器也不是一個靜態大小，它的大小設置爲瀏覽器窗口的百分比，我希望字體大小在瀏覽器調整大小時與容器一起動態更新。填充動態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(); 
});

我不是從這個獲得期望的結果，所以然後試圖改變這使得刻度來源是容器，而不是窗口。這有點工作，但它沒有動態更新，它需要刷新頁面。

總之，我無法找到調整字體大小的方法，以填充容器，該容器的大小由瀏覽器窗口的百分比確定。

來源

2012-05-04 pete

爲什麼要發明一些已經存在的東西？目前已經是一個偉大的jQuery的工具，在那裏：http://fittextjs.com/

來源

2012-05-04 13:37:06

這隻能調整到容器的寬度。我希望字體大小根據容器的大小調整，無論寬度或高度是否發生變化。 – pete

您可以嘗試聯繫此腳本的製作人。他們在Twitter上！ https://twitter.com/#!/trentwalton http://twitter.com/davatron5000 http://twitter.com/raygunray –

這不是一個真實世界的問題，但是，但是視相關的字體大小在地平線上：

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

目前，它的唯一的支持鉻金絲雀，但很高興知道它即將到來。

來源

2012-05-04 13:41:24 chipcullen

填充動態div的字體大小

回答

相關問題