如何使相對容器的大小字體大小

Question

HTML：

<span> text </span> 

CSS：

span{ 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
} 

我想使文本適合跨度大小。所以如果跨度是200x200，字體應該有72px的高度。如果它更小，字體大小應該更小。這可能嗎？

以百分比設置字體大小似乎沒有任何影響。

Answer 1

我認爲使用em單位的高度和字體大小是問題的最佳選擇。我無法給出確切的代碼，但是閱讀這篇文章，對於您的未來設計來說，它真棒，更好。

http://www.w3.org/WAI/GL/css2em.htm

Answer 2

$(".container").each(function(){ //if container is a class 
    $('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class 
}); 

可以動態調整大小的jQuery這樣的：

$(window).resize(function(){ 
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px'); 
});