画像のキャプション（テキスト）は、画像

Question

とともに大幅に縮めている私が持っている：

<div style="min-width: 1000px;"> 
    <p> 
     Some text 
    </p> 
    <div class='div_img_left'> 
     <img src="images/sth.png" alt="missing image" style="max-width: 100%;"> 
     <footer>My caption</footer> 
    </div> 
</div> 


.div_img_left { 
    max-width: 50%; 
    float: left; 
    margin-right: 30px; 
    margin-bottom: 2em; 
    text-align: center;  
} 

それは私のPCの画面上で罰金を見ています。問題は私の携帯電話で開くときに始まります。ここでの問題は、画面に1000pxの画面幅がないことです。だからすべてが縮小する。問題は「一部のテキスト」がうまく見えるということです。残念ながら、「私のキャプション」は大幅に縮小しています。これをどうすれば解決できますか？

他の幾何学的制約を使用しようとしましたが失敗しました。具体的には％または分の高さを使用します。

Answer 1

レスポンシブサイトをご希望の場合は、メディアクエリを使用して、このような大きな数字に設定しないでください。min-width幅はvwを使用してください。

.div_img_left { 
 
    max-width: 50vw; 
 
    float: left; 
 
    margin-right: 30px; 
 
    margin-bottom: 2em; 
 
    text-align: center; 
 
    
 
} 
 
figcaption { 
 
    font-size: 1em; 
 
    line-height: 1.3; 
 
    text-align: center; 
 
} 
 
@media (max-width: 500px) { 
 
    figcaption { 
 
    font-size: 14px; 
 
    line-height: 1 
 
    min-width: 100%; 
 
    } 
 
    figure { 
 
    min-width: 100vw; 
 
    } 
 
}

<div style="width: 100%;"> 
 
    <!--changed from min-width: 1000px--> 
 
    <p> 
 
    Some text 
 
    </p> 
 
    <figure class='div_img_left'> 
 
    <img src="http://placehold.it/150x200/eea/e00?text=150x200" alt="missing image" style="max-width: 100%;"> 
 
    <figcaption>My caption</figcaption> 
 
    </figure> 
 
</div>