css - 字体大小可以是 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/100th of the width of the viewport.(source MDN)

如果您的 #container 宽度设置为视口(viewport)的百分比，字体大小将适应它的宽度:

DEMO

CSS:

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

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