我有一个 h1 我想适应视口的整个宽度,它由等宽字体的13 个字符组成。在阅读了关于视口大小排版的CSS-Tricks文章之后,如果我想实现这一点,我只需将 h1 的样式设置为:
h1 {
font-size: 13vw;
font-family: monospace;
}
然而,这会留下一些空间(突出显示文本以查看空白):
(这里会有一张图片,但我没有足够的代表,所以点击这里查看 JSFiddle)
我试过其他尺寸,font-size: 14vw;
有点偏大,font-size: 13.99vw;
看起来刚刚好,但奇怪font-size: 13.999vw;
的是还是太大了?
有人可以解释这里发生了什么吗?为什么等宽字体中 13 个字符长度的字符串中的每个字符都需要超过(100/13)% 的视口宽度才能适应整个视口宽度?