CSS: Dynamisch Schriftgröße in Container, der 100vh ist

Question

Problem: Ich habe einen Container, der 100vh ist, wenn der Bildschirm schrumpft, möchte ich die Schriftart mit ihm schrumpfen und immer in den Container passen, nie darüber verschütten .

Hinweise: Ich weiß, das ist ziemlich einfach mit @media CSS-Regeln durchgeführt werden kann, aber ich frage mich, ob oder nicht ist es möglich, ohne @media zu erreichen oder dynamisch

Fiddle: 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

Verwendung vw, oder vh, als Schriftgröße Einheit

.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>