image - 为什么这个媒体查询不起作用？

Question

代码：

@media screen and (min-width: 371px) {

     .img_displayer {
         display:none;
    }
}

如果我没记错的话，上面的代码表示如果浏览器的最小宽度变为 371px，则不应显示 .img_displayer 元素。但是现在当我的网站全页打开时，图像不显示。我究竟做错了什么？

Answer 1

您的媒体查询是说“如果媒体是屏幕并且至少有371 像素宽，则隐藏图像”。

我想你可能打算使用max-width:370px

Answer 2

Kolink 解释得非常好。您的图像一直显示到屏幕宽度为 371 像素，然后display:none开始隐藏图像。这是一个快速的JSFiddle来演示。如果您调整窗口大小，使结果窗口小于 371 像素，您的图像就会出现。