视口宽度如何与CSS中的字体大小一起使用？

Question

有人可以帮助我了解视口宽度单位如何与字体大小配合使用吗？在文档中，它说 1vw = 视口宽度的 1%（所以我猜是窗口宽度的 1%？），但是如果我给 h1 的字体大小为 5vw，它几乎覆盖了我页面的一半？

我的问题基本上是如何使用这个单位来表示字体大小？如果你设置某个东西的宽度，它的工作效果非常好，但是当你将它用于字体大小时，它会变得巨大？

Answer 1

CSS中的视口宽度单位（vw）实际上比字体大小更复杂一些。正如您正确提到的，1vw 等于视口宽度（您网站的可见区域）的 1%。因此，如果您的显示区域是 1000 像素宽，则 1vw 就是 10 像素。

对于前。此代码确保 h1 的字体大小从 16px 开始，并与视口宽度成比例增长，但不像单独使用 vw 那样激进。

h1 {
    font-size: calc(16px + 2vw);
}

Answer 2

如果屏幕是 1920 宽并且你设置了

font-size: 5vw;

那么实际的字体大小将会是

5 * 1920 / 100

=>

96px