position使用時、レスポンシブでテキストがずれるのを防ぎたい

Question

画面幅に合わせて、縮小したとき、テキストがずれずに、小さくなっていく方法を教えてください。
画像はそのまま位置も変わらずに縮小されるのですが、テキストがはみ出してしまいます。
フォントサイズを都度変更したり、ずれた画面サイズごとにmedia queryで細かく設定するのではなく、手間なく、縮小させたいです。

• Bootstrap４　使用
• row col を使用
• グレーの画像とブルーの画像の上にテキストをpositionで置いています。
• 画像は、html上ではサイズ指定を行わず、max-width=100%として、縮小されています。

ご教授のほど、よろしくお願いします。

Answer 1

font-sizeをvwで指定してみるのはいかがでしょうか。

参考記事
CSSで動的にサイズが変わるフォントを指定
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する

Comments

[konoha0708]

vmを使ったことがなかったのですが、教えていただいた参考サイトを確認してみます。
ありがとうございました！