调整窗口大小时展开的字体大小

Question

如何在HTML中创建字体，以便在展开窗口时，文本的大小也会扩展。类似于设置文本的百分比，该百分比将采用它所在框的大小的百分比。

以下是我想要发生的事情的说明：

#box #text {
   font-size: 50%;
}

现在我们可以说#box是200px，#text应该是100px。 显然，我不能只为#text设置固定宽度，因为在网站#box中将是动态宽度。

Answer 1

在jquery中执行。

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

Answer 2

在完全支持CSS3的浏览器中使用vh（视口高度），vw（视口宽度）和/或vm（视口最小（尺寸最小））单位，对于其他浏览器，请听Razor Storm的回答中的resize和JavaScript。

Answer 3

在支持它的浏览器中，您可以使用CSS media queries根据窗口的宽度更改布局。