Question

@media screen and (min-width: 900px) and (max-width: 1215px) {
 #menu {
      display:none;
   }
}

这不起作用，div仍然可见。但是，如果我将div更改为<div class="menu">而不是<div id="menu">和css：

@media screen and (min-width: 900px) and (max-width: 1215px) {
   .menu {
       display:none;
   }
}

它有效。为什么会这样？

修改的

这就是Inspector所说的：

element {
    display: block;
}
#listMenuTop {
    display: none;
}
#listMenuTop {
    display: none;
    margin-bottom: -14px;
    margin-top: 10px;
}

但两个显示：没有交叉。 display：block;来自？

编辑2

我发现了问题。一个js函数覆盖了css显示属性：

document.getElementById('listMenuTop').style.display='block';

我想要做的是在屏幕＆gt; = 900px时以及屏幕＆lt;时隐藏＃listMenuTop 900px能够从按钮显示/隐藏#listMenuTop。问题是当#listMenuTop显示在屏幕上时＆lt;如果我将屏幕调整到超过900px，它不会隐藏900px，因为js函数总是覆盖显示属性。

Answer 1

请改为尝试：

@media screen and (min-width: 900px) and (max-width: 1215px) { 
    #menu {   
        display:none !important;
    }   
}

由于

Answer 2

由于您的检查员说您已将内置样式添加为Javascript（更新问题），因为：

<div id="listMenuTop" style="display: block;"> ... </div>

比你的CSS看起来像这样：

 @media screen and (min-width: 900px) and (max-width: 1215px) {
      /* Following will override inline style */
      #listMenuTop[style] {
           display: none !important;
      }
 }

Css显示没有工作

2 个答案: