CSS，相对字体大小

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

---

编辑：Javascript/JQuery很好。不，这只能用Javascript完成。

我以前用JQuery做过。如果你对这篇文章感兴趣，可以看看。您还可以使用CSS来检测设备宽度（不是浏览器，旧浏览器也不支持）

---

jquery是选项吗

非常简单，如果是：

你好，世界

​
$（文档）.ready（函数（）{
var sizeMe=（$（“#容器”）.height（）/100）*90；/*90%容器*/
$（'p'）.css（'font-size'，sizeMe）；
};

仅扩展泰勒的答案，这就是javascript的意义所在，尽管我有点相信您可以使用CSS3视口实现同样的壮举，但您最好使用jQuery（它通常位于大多数浏览器的缓存中，并且始终托管在谷歌上，因此无需担心：）

如果您有这样的css：

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

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

您可以在jQuery中动态调整大小，如下所示：

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

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

---

在CSS3中，有一个

vw

单元，它代表视口宽度的1/100

h1 { font-size: 5.5vw; }

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

---

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

正如泰勒所说，如果使用“em”或“%”等动态字体大小，字体将根据浏览器当前设置的字体大小进行计算值。您必须使用javascript计算字体大小如果您想根据标签的高度/宽度通过容器大小获得大小，您的意思是包括填充，包括填充和边框，还是包括填充、边框和边距？此外，在我看来，我不建议您根据视区/窗口大小调整字体大小事件的可读性主要是容器、窗口、填充等。我只希望它能够相对于调整窗口大小以及布局大小时发生的任何其他变化自动调整大小……理论上还有许多其他属性需要更改（即文本缩进、行高等）。但同样，OP没有询问。：）那是因为他/她没有将JS放入onresize处理程序中。如果你把它放在那里，它应该可以工作。不过，这与容器的大小无关。这会产生相同的效果，但对容器大小的任何更改，无论是通过JavaScript还是通过更改CSS，都不会很好地工作。您必须记住在更改容器大小时更新此值。仅供参考，您不必指定

#mytext

是

#body

的后代，除非您试图增加特异性值（坦白说，如果使用id，这是错误的方法）。这取决于场景，以这种方式使用CSS没有错。尽管如此，这只是一个演示…嗯。因此，

#mytext

最多只能引用一个元素。话虽如此，在CSS规则中没有太多的必要指定它的任何优势。哦，天哪，我刚刚得到了你想要解释的东西。是的，确实如此，但我只是提供了一个例子：）我无法在JSFIDLE上实现这一点，但我相信你的话：）