如何使相对容器的大小字体大小

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'); 
});