「画面サイズに合わせて文字の大きさも変化させたい」けど、「em」や「rem」や「％」ではうまくいかない。
早速ググってみると。。。ありました！
vw(ViewportWidth)とvh(ViewportHeight)を使って、フォントのサイズ指定をすると可変のフォントサイズになるらしい。
vw(ViewportWidth)で指定すると、画面の横幅に合わせて、
vh(ViewportHeight)で指定すると、画面の縦幅に合わせて文字サイズが変化します。
【例】CSSで
.クラス名 {font-size:5vw;}
この場合、フォントサイズは横幅の5％の値になります。
.クラス名 {font-size:5vh;}
この場合、フォントサイズは縦幅の5％の値になります。
ウインドウサイズを変更してみてください。
下の文字が画面の大きさに合わせて大きさが変化します。
横幅で指定しています。
＜DEMO＞
可変フォントサイズ
出典：https://qiita.com/Moris_Mk-II/items/3e46dce67f36f2b5b7f4