有没有办法用 CSS 放大字体以适应屏幕？

Question

我正在考虑改进OpenBSD ports 网站的首页，其中列出了大约71 个类别的端口。

我的想法是使用几列（可能是ul {-moz-columns: 9em;}also with a limit to at most 8 columns at 89em and above、@media (min-width: 89em) {ul {-moz-columns: 8;}}，有效地指定最多应该有8列，最小宽度为9em），并添加一些padding/margin 到列出端口的每个列表项，但在更大的屏幕上，这可能会占用太少的屏幕并留下太多的空白空间。

有没有办法自动放大某些元素的字体，填满所有可用空间，但不影响其他元素的大小？例如，我想放大标题和类别的大小，但将页面底部的所有学分保留为正常字体。我正在寻找纯 CSS 的解决方案。 （我想我可以在几个特定的​​@media 规则中放置几个​​跳跃的大小，但我很好奇是否有更灵活和自动化的解决方案。）

Answer 1

我想这就是你要找的东西：http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

您可以使用 vw（视口宽度）或 wh（视口高度），其中 1 v == 初始包含块的 1%

例子：

 p{
     font-size: 4vw;
 }