Как изменить размер шрифта, чтобы заполнить область просмотра?

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; 
    } 
}