Css3 Media Query无法使用max-width

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应该解决问题.

否则,您必须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示例可以更好地回答您的问题.

祝好运!