CSS,相对字体大小

Question

是否可以将字体大小设置为容器大小的百分比？我有一个项目列表,其中包含图像,标题和说明.当用户调整窗口大小时,图像会自动调整大小.我希望标题字体做同样的事情.

编辑:Javascript/JQuery很好.

Answer 1

在CSS3中,有vw单位,代表视口宽度的1/100.例如,

h1 { font-size: 5.5vw; }

将标题字体大小设置为视口宽度的5.5%.

但是,到目前为止,这似乎适用于IE 9(标准模式).此外,只有在重新加载时,IE 9才会在调整浏览器窗口大小时动态更改单元的值.

Answer 2

只是为了扩展Tyler的答案,这就是javascript的意思,虽然我确信你可以使用CSS3视口实现同样的壮举,但你最好还是使用jQuery(它通常在大多数浏览器的缓存中并且总是托管在谷歌上所以不用担心:)

如果你有这样的CSS:

#body #mytext {
   font-size: 50%;
}

你可以像这样在jQuery中动态调整大小:

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