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

Question

问题：我有一个100vh的容器，当屏幕缩小时，我希望字体缩小，并且始终适合容器，永远不会溢出它。

注意：我知道这可以通过@media css规则很简单地完成，但是我想知道是否可以在没有@media或动态<的情况下完成< /强>

小提琴：https://jsfiddle.net/wm0n4mys/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用vw或vh作为字体大小单位

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;