nav-menu无法按预期工作

Question

我有一个导航菜单图标我只想在小屏幕上显示（小于768像素）。 这是代码

@media screen and(max-width:768px){
  .nav-menu{display:block;}
}
.nav-menu{
  display:none;
}

<div class="nav-menu" id="nav"><h3>&#9776;</h3></div>

但是在小屏幕上看不到它。我的代码出了什么问题。提前谢谢。 的更新： 这里是JS FIDDLE

Answer 1

你必须改变这些规则，否则第二个将覆盖第一个：

.nav-menu{
  display:none;
}
@media screen and (max-width:768px){
  .nav-menu{display:block;}
}

Answer 2

最后  我得到了答案有愚蠢的错误：

＆＃13;

＆＃13;

.nav-menu{
  display:none;
}
@media screen and (max-width:768px){
  .nav-menu{display:block;}
}

＆＃13;

<div class="nav-menu" id="nav"><h3>&#9776;</h3></div>

＆＃13;

＆＃13;

＆＃13;