css - 低解像度で画像をテキスト用に交換する

Question

解像度が低いと、右側がわずかに切り取られる大きな画像があります。解像度が低い場合は、画像をテキストに置き換えてもかまいません (日付を指定できるカウントダウンです)。display:none; を使用して、より低い解像度で画像を取り除くことができました。

HTML

<div id ="image"><div/>

理想的には、次のようなものが必要です。

<p>a date here....</p>  <---this value hidden until the resolution hits the lower margins

CSS

@media (max-width: 500px) {
    image:display.none;
    }

Answer 1

画像と段落要素の両方を HTML 内に配置します。これに合わせて CSS を変更します。

@media ( max-width:500px ) {
    #image img { display:none; }
    #image p { display:block; } 
}

/* Example when the viewport is bigger */
@media ( min-width:500px ) {
    #image img { display:inline; }
    #image p { display:none; }
}

Answer 2

HTML

<div id="image">
    <img src='...'>
    <p>a date here...</p>
</div>

CSS

@media (max-width: 500px) {
    #image > img {
        display: none;
    }
}

@media (min-width: 500px) {
    #image > p {
        display: none;
    }
}