Question

我目前正忙于响应式字体大小。对我来说，vh，vw，vmin等单位的含义是很清楚的。

但是我无法与他们达成令人信服的成就。要么在大屏幕尺寸上变大，然后在小屏幕上变小。反之亦然。

是否存在适用于哪些值的一般规则？

例如：h1应该是2vw，h2应该是1.5vw，p应该是1vw，依此类推...

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

Answer 1

Hackape的评论正确，因为这不是代码问题。但是要从代码意义上回答“哪个值合适”这个实际问题，答案就是全部。

您可以使用vw来使字体随着视口的宽度增加/缩小。另外，您可以使用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。

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

如您所见，不使用任何媒体查询。而且，如果您想使用vw或vh，就可以。