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

Question

代码：

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

     .img_displayer {
         display:none;
    }
}

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

Answer 1

您的媒体查询所说的是“如果媒体是一个屏幕且至少 371px宽，则隐藏图像”。

我认为您可能打算使用max-width:370px

Answer 2

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