5

是否可以将字体大小设置为容器大小的百分比？我有一个包含图像、标题和描述的项目列表。当用户调整窗口大小时，图像会自动调整大小。我希望标题字体也这样做。

编辑：Javascript/JQuery 很好。

4

5 回答 5

11

在 CSS3 中，有一个vw单位，代表视口宽度的 1/100。例如，

h1 { font-size: 5.5vw; }

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

但是，到目前为止，这似乎仅适用于 IE 9（标准模式）。此外，IE 9 不会在调整浏览器窗口大小时动态更改单位的值，只会在重新加载时更改。

于 2012-07-16T21:16:10.333 回答
5

只是为了扩展 Tyler 的答案，这就是 javascript 的含义，尽管我确信您可以使用 CSS3 视口实现相同的壮举，但使用 jQuery 会更好（它通常位于大多数浏览器的缓存中并且始终托管在谷歌上所以不用担心:)

如果你有这样的 CSS：

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

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

$(window).resize(function(){
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
于 2012-07-16T21:16:06.700 回答
3

不，这只能在 JavaScript 中完成。

于 2012-07-16T20:34:32.727 回答
1

jquery是一种选择吗？

如果是的话，超级简单：小提琴

<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>
于 2012-07-16T20:54:11.817 回答
-1

我过去用 jquery 完成了它。如果您对本文感兴趣，请查看这篇文章。您还可以使用 CSS 来检测设备宽度（不是浏览器，旧浏览器不支持）。

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

于 2012-07-16T20:48:48.263 回答