font-size可以是css/css3中容器大小的百分比吗？

Question

我有一个容器:

<div id="container"><h1>LONG TITLE LINE</h1></div>

和css:

#container {
    width: 50%;
    height: 50%;
}

#container h1 {
    font-size: XXXXXX;
}

"XXXXXX"< - 我希望字体大小基于页面/容器的宽度.

---

问题:是否可以根据页面宽度设置h1的字体大小？在css3？我确信它可以使用JS完成,但是如果有可能的话就要避免这样做.

Answer 1

根据您的布局的另一个选项是使用vw单位：

vw ：视口宽度的 1/100。（来源 MDN）

如果您的#container宽度设置为视口的百分比，则 font-size 将适应其宽度：

演示版

CSS：

#container h1 {
    font-size: 5vw;
}

对单位的浏览器支持vw是 IE9+，请参阅canIuse了解更多信息。

Answer 2

我不认为这在 CSS 中是可能的，但这可能对你来说很有趣：

http://fittextjs.com/