Question

我希望标题文本总是占用（例如）屏幕宽度的80％和屏幕高度的80％。文本应始终保留在视口中，并在Windows调整大小时自行调整以获取定义的视口大小。我知道我可以使用（例如）font-size：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;？

请参阅此小提琴fiddle

如何创建一个标题文本，使其自身适应视口的高度和宽度

3 个答案: