根据容器高度创建动态字体大小：我做错了什么？

Question

情况：

我试图将文本的字体大小与容器的高度成比例，以使其像文本一样作为背景图像的一部分。 我正在尝试通过给容器提供一个以px为单位的font-size作为其height 1/20（现在近似），然后根据em定义后代文本元素。

的HTML

<div id="front-page-blue-strip">
    <h1>Here's my title</h1>
    <p>Here's the text under my title</h1>
</div>

的CSS

#front-page-blue-strip h1 { font-size: 1.5em;}
#front-page-blue-strip p  { font-size: 0.9em;}

JS

$(window).resize(function(){
      $('#front-page-blue-strip').attr('font-size', ($(this).height() / 20).toString() + 'px');     
});

现在，我已经证实， font-size的#front-page-blue-strip被重新调整计划一样，但font-size内的h1和p元素是没有的。 我究竟做错了什么？

Answer 1

$('#front-page-blue-strip').attr('font-size', ($(this).height() / 20).toString() + 'px');

通过这样做，您只需将属性添加到不是预定义属性的元素，而是将其添加为预定义属性style之一的属性。

而是试试这个

$('#front-page-blue-strip').css('font-size', ($(this).height() / 20).toString() + 'px');

要么

$('#front-page-blue-strip')
 .attr('style','font-size:'+ ($(this).height() / 20).toString() + 'px');

Answer 2

font-size需要放在style属性内。 您可以使用jQuery的.css（）函数来做到这一点：

$(window).resize(function(){
      $('#front-page-blue-strip').css('font-size', ($(this).height() / 20).toString() + 'px');     
});

JSFiddle