DIV不会在小屏幕上消失

Question

我尝试了很多不同的方法，没有任何效果。

我想让DIV在小于499px的屏幕上消失。

div.navND {
    display: none;
}

div.navNM {
    display: none;
}

@media screen and (min-width: 750px) {
    div.navND {
        clear: both;
        display: block;
    }
}

@media screen and (min-width: 500px) {
    div.navNM {
        clear: both;
        display: block;
    }
}

@media screen and (max-width: 499px) {
    div.navNM {
        display: none;
    }
}

任何人都可以帮我解决这个问题。

谢谢

Answer 1

@media screen and (max-width: 499px) {
    div#id { 
        display:none;
    }
}

我认为应该使得给定#id的div在499及以下消失。因此，如果您希望它仍然在499处可见，则将其更改为498。

http://jsfiddle.net/y6gffrp6/1/

^在那个例子中我用700作为例子。

Answer 2

在JSFiddle中测试你的css代码给我们提供了我们期望的结果

http://jsfiddle.net/p3dtkj2j/

我不明白你为什么放这个

@media screen and (min-width: 750px) {
    div.navND {
        clear: both;
        display: block;
    }
}

只需显示：默认为阻止

Answer 3

谢谢大家的帮助，

在你的帮助下，我开始改变一切，并且有效。

错误 如果我将显示更改为阻止而不是无：

div.navND {
    display: block;
}

div.navNM {
    display: block;
}

这两个div都会显示出来，但我当时只想要一个或者没有。

以下是我的问题的解决方案：

/*---------------*/
.navND {
    display: none;
}

.navNM {
    display: none;
}

@media screen and (min-width: 750px) {
    div.navND {
        clear: both;
        display: block;
    }
}

@media screen and (max-width: 749px) {
    div.navNM {
        clear: both;
        display: block;
    }
}

@media screen and (max-width: 499px) {
    div.navNM {
        clear: both;
        display: none;
    }
}

错误是＆＃34; min-width＆＃34;

@media screen and (min-width: 750px) {
@media screen and (min-width: 500px) {
@media screen and (max-width: 499px) {