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>