如何调整字体大小以填充视口？

Question

我希望尽可能多的文字填满我的视口。它不必是连续自适应的（=当视口改变时可以刷新，当它的大小交互变化时，它不需要与视口一起适应）

我尝试了FitText.js和BigText - 它们可以很好地计算字体大小，该字体大小将使用视口的整个宽度。如果高度太小，则文本不适合（滚动条显示）

我厌倦了使用viewport-percentage lengths（特别是vmin），但是当字体的大小适应宽度时，需要手动调整vmin的值以找到正确的宽度

是否有类似于FitText或BigText的解决方案，但是还会考虑视口的高度？

Answer 1

也许你应该考虑一种纯粹的CSS方法：

.textcontainer{
    font-size: 12px;
}

@media screen and (min-width: 768px){

    .textcontainer{
        font-size: 14px;
    }

}

@media screen and (min-width: 1200px){
    .textcontainer{
        font-size: 18px;
    }
}