我希望使用大众单位来调整我的排版，但是当这样做时，文本是巨大的，显然大于视口宽度。从本质上讲，我希望我的文本在父.container 中响应，所以文本永远不会被裁剪或溢出，因为如果使用像 px 或 em 这样的静态大小单位？
HTML<div cl="container">
<h1>Responsive Typography!</h1>
</div>
.container {
width: 100%;
background: red;
height: 100%;
}
h1 {
font-size: 40vw;
}
你的小提琴渲染正确。
font-size，通常指的是大写字母 M 的宽度。
1vw是视口宽度的 1%。
因此，font-size: 40vw粗略地意味着“渲染该文本，使得大写字母 M 的宽度将是视口宽度的 40 ％”。换句话说，每个单独的字符将非常大。
它不会中断到一个新行，因为它都是一个单词，并且 CSS 默认情况下只在单词之间中断。（要中断单词中的字符，您可以在元素上使用word-break: break-all。不过，它通常看起来很糟糕。）
You confirmed in a comment that you ’ re trying to scale up the font size in your header so that the full text in it is some percentage of the viewport width.Depending on your cirtances,you can either
使用较小的font-size，仍然在vw中，并接受文本并不总是可预测的固定宽度；或者
尝试像FitText动态调整字体大小。
这是一个耻辱，但没有办法用纯 CSS 做你想要的东西;通常情况下，你的选择是妥协你的设计目标或使用一些聪明的 JS / 黑客来实现它。
* 关于font-size的注释：我上面说的不是真的font-size是如何计算的；它恰好对于大多数字体来说足够接近，并且使我的答案更容易阅读。实际情况更复杂。
更准确的经验法则是身高，即从上升者的顶部（像b，d和h这样的字母的上部）到下降者的底部（像g，j和 em 之间的字体的下部）的垂直距离。
本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处
评论列表（53条）