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