css - Css3媒体查询不适用于最大宽度

Question

我一直在尝试使用媒体查询隐藏最大宽度为 980 像素的元素，但由于某种原因它仍在显示。

如果我使用带有 min-width 的媒体查询，该元素会消失，但使用此代码它仍然显示，我可以找出原因吗？

@media (max-width: 980px) {
    .welcome-msg  {
        display:none;
    }
}

任何人都可以看到我的代码有什么问题吗？我目前正在使用 FF 响应式设计视图进行测试。

Answer 1

对于您当前的max-width媒体查询，display:none将一直应用到文档的宽度达到 980 像素，而不是980像素。

从您的问题来看，您似乎希望发生相反的情况，这就是您在min-width. 切换max-width到min-width应该可以解决问题。

否则，您将不得不display: none在您的非媒体查询 css 中设置您的元素，并display:block在您的max-width媒体查询中使用。

CSS

/* Only applies while screen is 980px or less */
@media (max-width: 980px) {
.welcome-msg  {
        display:none;
    }
}

/* only applies while screen is 980px or greater */
@media (min-width: 980px) {
.welcome-msg  {
        display:none;
    }
}

/* if you must use max-width, this is a solution */
/* otherwise, use min-width IMHO */
.welcome-msg  {
        display:none;
}

@media (max-width:980px) {
  .welcome-msg  {
   display:block; /* element will only show up if width is less than or equal to 980px */
  }
}

如果这不是您想要完成的，那么有一个Codepen示例对我们更好地回答您的问题会很有帮助。

祝你好运！