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（它通常是在大多数浏览器的缓存中以及始终托管在Google上，因此无需担心：）

如果您有这样的CSS：

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

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

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

Answer 3

不，这只能在JavaScript中完成。

Answer 4

jquery是一个选项吗？

超级简单，如果是：fiddle

<div id="container">
    <p>HELLO WORLD!</p>
</div>


<script>
$(document).ready(function() {
    var sizeMe = ($('#container').height() / 100) * 90; /* 90% of container */
    $('p').css('font-size', sizeMe);
};
</script>

Answer 5

我过去用jquery做过。如果您对此感兴趣，请查看此文章。您还可以使用CSS来检测设备宽度（不是浏览器，并且在旧版浏览器中不支持）。

http://css-tricks.com/resolution-specific-stylesheets/

CSS，相对字体大小

5 个答案: