媒体查询图像显示无，然后再显示

Question

使用media queries：我可以使图片在指定width或以下消失，使用display: none;

没问题

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

尝试将内联样式设置为display: visible;，然后使用查询尝试类似width的内容。

我认为最好的是黑客，初始height:0和width然后使用查询重置height和max-width:650px，例如min-width

我玩max-width和display: none;我做错了什么，是否min-width无法让max-width做{与{{1}}相反。

Answer 1

您只需根据需要设置display:none/block img

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

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

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

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

代码段仅显示650px以下

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

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

注意： display:visible不存在