如何创建使自身适应视区高度和宽度的标题文本

Question

我希望标题文本始终占据(例如(屏幕宽度的 80% 和屏幕高度的 80%。文本应始终保留在视口中，并在窗口调整大小时自行调整其大小，以采用定义的视口大小。我知道我可以使用(例如(字体大小：30vw 来实现我的目标水平，但我希望文本在垂直和水平方向上自行调整。我想要的实现的一个类似示例是 www.sels.de(标题文本调整自身大小以适合水平和垂直视口(。jquery插件或纯css实现是可以的。我也知道我可以使用宽度和高度媒体查询来做到这一点，但众所周知它是有问题的(所以，我正在寻找除此之外的解决方案(

Answer 1

您链接的示例只是使用图像作为文本，因此可以正确缩小。尝试像font-size: 16em;这样的 em 单位，否则我只会使用这样的媒体查询：(没有什么问题(

@media screen and (max-width: 1024px) {
    .header-text {
        font-size: 16px;
    }
}
@media screen and (max-width: 768px) {
    .header-text {
        font-size: 14px;
    }
}

Answer 2

此标头看起来像 http://getbootstrap.com/components/#navbar 的操作

如果您需要类似的东西并且没有时间创建，这是最好的方法。

Answer 3

好吧，如果我理解正确，它可能比我最初想象的要容易。 您是否尝试过仅设置font-size: 80vh;？

看到这个小提琴小提琴