CSS：100vhのコンテナ内のフォントの動的リサイズ

Question

問題：私はコンテナが100vhですが、画面が縮小するとフォントが縮小され、常にコンテナ内に収まります。

注：私は、これは@media CSSのルールではかなり簡単に行うことができます知っているが、私はそれが@mediaまたは動的に

フィドルせずに達成することが可能であるかどうかを疑問に思っている：https://jsfiddle.net/wm0n4mys/

.container{ 
 
    border:1px solid black; 
 
    text-align:center; 
 
    height:100vh; 
 
} 
 
h2{ 
 
    font-size:60px; 
 
} 
 
*{ 
 
box-sizing:border-box; 
 
padding:0; 
 
margin:0; 
 
}

<div class="container"> 
 
    <h2 class="main">A TITLE THATS TALKING ABOUT SOMETHING BIG AND THIS IS A PRETTY BIG TITLE MAN I GET IT YO</h2> 
 
    <p class="text">Something, Something, Something, Something, Something, Something Something Something Something Something SomethingSomething SomethingSomethingSomethingSomethingSomethingSomething</p> 
 
</div>

Answer 1

使用vw、またはvh、フォントサイズのユニットとして

.container{ 
 
    border:1px solid black; 
 
    text-align:center; 
 
    height:100vh; 
 
} 
 
h2{ 
 
    font-size:5vw; 
 
} 
 
*{ 
 
box-sizing:border-box; 
 
padding:0; 
 
margin:0; 
 
}

<div class="container"> 
 
    <h2 class="main">A TITLE THATS TALKING ABOUT SOMETHING BIG AND THIS IS A PRETTY BIG TITLE MAN I GET IT YO</h2> 
 
    <p class="text">Something, Something, Something, Something, Something, Something Something Something Something Something SomethingSomething SomethingSomethingSomethingSomethingSomethingSomething</p> 
 
</div>