こんにちは、minoruです。
Webに公開しているHTMLファイルは、当然ですがPCやスマホなど、色んな異なる画面幅で読まれるわけですが、画像を背景にして、その上に文字を重ねている場合など、画面幅に合わせて画像は縮小表示されても、文字はそのまんまでバランスがおかしくなります。
ウィンドウ幅に文字サイズを連動させて変えるCSSの書き方を探したらありました。
ちなみに「css 横幅 文字サイズ 自動」でGoogle検索して発見。
参考：いつか使うかも？cssのfont-sizeをビューポート-パーセンテージで指定する
上記サイトのサンプルページ
vw相対指定。ビューポートの幅の何パーセントか。
vh相対指定。ビューポートの高さの何パーセントか。
vmin相対指定。ビューポートの「幅か高さの短い方」の何パーセントか。
vmax相対指定。ビューポートの「幅か高さの長い方」の何パーセントか。
私のやりたかった事は、
こう書けば解決しました。
ただ、これだと画面幅の何パーセントか？なので、もし極端に横長なディスプレイとかが今後流行してしまった場合、ちょいと面倒な手直しが必要かも知れませんね？
まあ詳しい事は必要になった時にじっくり覚えるとして、とりあえず解決できそうなWebページを見つけたので載せておきます。
参考：レスポンシブルにフォントサイズを変更し、最小サイズ・最大サイズを指定する方法
要するにCSSの@mediaって奴を使って、最小・最大を指定しておく方法。
最終的なソース部分を以下に引用。
html {
font-size: 16px;
}
/*
* レスポンシブフォントサイズ
* ウィンドウ幅 860px から 1280px まで、
* フォントサイズが 16px から 24px に流動的に変化する
*/
@media (min-width: 860px) {
html {
font-size: calc(1rem + ((1vw - 8.6px) * 1.9048));
}
}
/* 最大フォントサイズ : 幅 1280px 以上は 24px */
@media (min-width: 1280px) {
html {
font-size: 24px;
}
}
追伸
ニンテンドースイッチのプロコンは品薄続きでどこにも売ってない…、互換コントローラーマニアの私が色々試した結果、これが一番コスパよく満足度が高かったので一応リンク貼っときます。
https://amzn.to/3FPHsfZ