用较低分辨率的文本交换图像答案

【问题标题】：Swapping an image for text at lower resolutions用较低分辨率的文本交换图像
【发布时间】：2013-08-21 21:03:50
【问题描述】：

我有一张较大的图像，在较低的分辨率下会在右侧略微被截断。在较低的分辨率下，我不介意将图像换成文本（它是倒计时，我可以指定日期）你是怎么做到的？我已经设法使用 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;
    }

【问题讨论】：

标签： css mobile responsive-design media-queries

【解决方案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; }
}

【讨论】：

小心这个...img默认是inline
@rink.attendant.6 谢谢你的警告，我已经编辑了我的答案。

【解决方案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;
    }
}

【讨论】：