css - 媒体查询图像显示无，然后再次返回

Question

使用 media queries : 我可以让图像在指定的 width 或以下消失, 使用 display: none; 没问题

问题是弄清楚如何做相反的事情，比如上面的某个 width与 display: none;(假设我想要一个小 Logo 只显示在 x 像素以下..)

尝试将内联样式设置为 display: none;然后使用查询来尝试类似 display: visible; 的操作不好。

我能想到的最好的办法是破解，初始 width和 height:0然后使用查询重置 width和 height比如说，max-width:650px

我玩过 min-width和 max-width我做错了什么，是否有 display: none; 的对立面无法获得 min-width与max-width相反.

Answer 1

你只需要根据你的需要设置display:none/blockimg

因为我不确定您真正想要的是 2 个片段:

图片仅显示 650px 以上的片段

img {
  display: block
}
@media (max-width: 650px) {
  img {
    display: none
  }
}

<img src="//placehold.it/600x600" />

---

图片仅显示在 650 像素以下的片段

img {
  display: block
}
@media (min-width: 650px) {
  img {
    display: none
  }
}

<img src="//placehold.it/600x600" />

注意: display:visible不存在