我目前忙于响应式字体大小。 我很清楚 vh、vw、vmin 等单位的含义。
但我无法与他们一起完成令人信服的事情。 它们要么在大屏幕上变大,要么在小屏幕上变小。反之亦然。
是否有任何适用于哪些值的一般规则?
例如:h1应该是2vw,h2应该是1.5vw,p应该是1vw等等...
我应该使用 vw 还是 vh,为什么?
最佳答案
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
也可以。
关于css - 响应字体大小 : Which values are appropriate?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55805359/