css - 响应字体大小 : Which values are appropriate?

Question

我目前忙于响应式字体大小。我很清楚 vh、vw、vmin 等单位的含义。

但我无法与他们一起完成令人信服的事情。它们要么在大屏幕上变大，要么在小屏幕上变小。反之亦然。

是否有任何适用于哪些值的一般规则？

例如:h1应该是2vw，h2应该是1.5vw，p应该是1vw等等...

我应该使用 vw 还是 vh，为什么？

Answer 1

Hackape 在他们的评论中是正确的，这不是代码问题。但要从代码意义上回答“哪些值是合适的”这个实际问题，答案就是所有这些。

您可以使用 vw 使您的字体随着视口(viewport)的宽度增大/缩小。或者，您可以使用 vh 来根据高度进行增长/收缩。

至于您关于太大或太小的观点，您至少有两个选择。

媒体查询

使用媒体查询，您可以控制特定大小的字体大小，就像您可以在响应式设计中控制网站的任何其他部分一样。

p {
  font-size: 2vw;
}

@media (min-width: 600px) {
  p {
    font-size: 1vw;
  }
}

不要将该示例用作设计建议，但您可以了解如何根据您的选择轻松地适本地控制这些值。

CSS 锁

一个很好的替代方法是称为 CSS Locks 的技术。这实际上不是 CSS 的一部分，而是 CSS Calc 的一个公式，众所周知，它可以很好地给出字体大小的最小值和最大值。

有几篇关于 CSS 锁的好文章，其中一篇是 Florens Verschelde's The math of CSS Locks .

这是来自 CSS-Tricks' Fluid Typography 的示例:

p {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

如您所见，没有使用媒体查询。如果您想使用 vw 或 vh 也可以。