CSS，相对字体大小

Question

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

编辑：使用JavaScript / JQuery也可以。

- user736893

---

按容器大小，您是指包括填充、包括填充和边框，还是包括填充、边框和外边距？ - Tyler Crompton

此外，我个人认为不建议根据视口/窗口大小调整字体大小，这会严重影响可读性。 - Tyler Crompton

容器，窗口，填充，随便。我只希望它能够根据窗口和布局调整自动调整大小，以相对于其他任何变化而变化的内容。 - user736893

Answer 1

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

h1 { font-size: 5.5vw; }

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

然而，这似乎只在IE 9（标准模式）上有效。此外，当浏览器窗口被调整大小时，IE 9不会动态更改单位的值，只有在重新加载页面时才会更改。

- Jukka K. Korpela

---

这并不涉及容器的大小。 - Tyler Crompton

这样做可以达到相同的效果，但是无论是通过JavaScript还是更改CSS来更改容器的大小，都不会完全正确。必须记住在更改容器大小时更新此内容。 - Tyler Crompton

Answer 2

仅仅是对Tyler的回答进行扩展，JavaScript就是为此而生存在的，尽管我有点确定你可以使用CSS3视区来实现同样的功能，但最好还是使用jQuery（它通常在大多数浏览器的缓存中，并且始终由Google托管，所以不用担心：）

如果你有这样一段CSS：

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

您可以使用jQuery进行动态调整大小，如下所示：

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

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

- Chibueze Opata

---

只是提醒一下，除非你想增加特异性值（如果你使用的是id，则这种方法实际上是错误的），否则你不必指定#mytext是#body的后代。 - Tyler Crompton

这取决于情况，以这种方式使用CSS没有任何问题。尽管，这只是一个演示... - Chibueze Opata

每个id属性中的值必须是唯一的。因此，#mytext最多只能引用一个元素。话虽如此，在CSS规则中指定其任何祖先元素并没有太大必要。 - Tyler Crompton

哦，我明白你实际上想要解释什么了。确实是这样，但我只是提供了一个例子 :) - Chibueze Opata

我在jsfiddle上无法让它正常工作，但我会相信你的话 :) - user736893

Answer 3

不，这只能在JavaScript中完成。

- Tyler Crompton

---

就像 Tyler 所说的一样，如果您使用动态字体大小（如“em”或“%”值），则字体与浏览器当前设置的字体大小有关。如果您想根据标签的高度/宽度获得大小，则必须使用 JavaScript 计算字体大小。 - r3bel

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>

- Turnip

---

有许多其他属性理论上需要更改（例如文本缩进、行高等）。 - Tyler Crompton

但是话说回来，原帖并没有问到那个。 :) - Tyler Crompton

那是因为他/她没有将JS放在onresize处理程序中。如果你把它放在那里，它应该可以工作。 - Tyler Crompton

Answer 5

我以前用过jquery做过这个。如果你感兴趣，可以看看这篇文章。你也可以使用CSS来检测设备宽度（不是浏览器，而且在旧版浏览器中不支持）。

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

- TurboSupra