モバイルで見た際に、画像と同じく文字も小さくなるのが理想なのですが、現状モバイルでみると画像の上に文字が乗らずその場に置き去りになっています。
どのように指定すれば画像と一緒に文字も小さくなりますか?
<style>
.fonts{
font-size: 4em;
line-height: 95%;
}
@media only screen and (max-width:600px) { /* 中画面用 */
.main-text {
font-size: 15px;
}
}
</style>
<div style="basics: relative;">
<img src="/uploads/2018/11/img.jpg" alt="topimg">
<div style="text-shadow:0px 0px 5px black">
<div style="position:absolute; top:115px; left:120px; width: 430px; margin: 0 auto;">
<span class="main-text fonts" style="color:#fff;">texttext.texttexttext</span>
</div>
</div>
</div>