CSS：动态调整容器中100vh的字体大小

Question

Problem: I have a container that is 100vh, when the screen shrinks, I would like the font to shrink with it and always fit within the container, never spilling over it.

Notes: I know this can be done pretty simply with @media css rules, but I'm wondering whether or not is it possible to accomplish without @media or dynamically

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

Use vw , or vh , as font size unit

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