Question

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

如果我使用min-width的媒体查询，该元素会消失，但是这段代码仍在显示，我可以找出原因吗？

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

有人能看到我的代码有什么问题吗？我正在使用FF响应式设计视图进行测试。

Answer 1

使用您当前的max-width媒体查询，display:none将适用，直到文档的宽度达到980px，而不是 980px。

从您的问题来看，您似乎希望发生相反的情况，这就是您使用min-width取得成功的原因。从max-width切换到min-width应该可以解决问题。

否则，您必须在非媒体查询css中将元素设置为display: none，并在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示例以便更好地回答您的问题会很有帮助。

祝你好运！

Css3 Media Query无法使用max-width

1 个答案: