以较低分辨率交换文本图像

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;
    }
}