文字のサイズを自動で変更する方法

Question

背景画像を画面の高さに合わせ、画面の高さが変わってもテキストを背景画像の中央に表示させるように設定しています。
画面の高さや幅が変わった時に、テキストのサイズも自動で変化するようにするにはどのようにすれば良いのでしょうか。

メディアクエリのブレイクポイント毎に変化させるのではなく、画面の大きさに合わせて表示するような方法が知りたいです。

現状テキストのサイズをpxで指定しており、（当然ですが）画面のサイズを変えても同じ大きさのままなので、縦横に合ったサイズにしたいと思っています。
そもそもメディアクエリ以外の方法はあるのでしょうか？
初心者の質問ですみませんが、よろしくお願いいたします。

<div id="top">
	<h1>テキスト</h1>
</div>

top{
  background-image: url(images/abc.jpg);
  background-size: cover;
  background-position: center center; 
  width: 100%;
  height: 100vh;
　display: flex;
  justify-content: center; 
  align-items: center;
}

Answer 1

font-sizeをpx指定ではなくvwで指定すると画面幅に応じて文字サイズを拡大縮小することが可能です。

Comments

[kizunami]

ありがとうございます！今まで文字はpxとemしか使ってなかったので・・・こういう時にvwが必要なのですね。助かりました！初心者の質問失礼いたしました。ありがとうございました！