Question

我有一个问题。我有一个菜单，但是当我设置display：none时，我希望通过按钮点击（字体真棒）使其响应然后显示：阻止媒体查询，我的图标没有出现..请帮助。

html：

trait TraitA {
   var x = 0
   var y = 0
}

trait TraitB extends TraitA {
   var z = 0
}

css：

<div id="menuIcon">
                       <i class="fa fa-bars fa-3x" style="color:white"></i>
  </div>

Answer 1

在上面的代码中，display：none;在显示屏下方：block;所以它压倒了它。像这样组织你的代码，它将起作用：

#menuIcon{
    display:none;
} 

@media screen and (min-width:320px) and (max-width:640px){
   .menuRight{
   display:none;
 }

 #menuIcon{
   display:block;
   float:right;
   cursor:pointer;
 }
}

另外，请在级联时看到此内容：https://css-tricks.com/specifics-on-css-specificity/

Answer 2

也许只是尝试将display: block;设为!important。

Answer 3

如果在CSS文件中将元素添加到元素两次，则CSS会为最后添加的代码提供更高的优先级。

e.g。

.box { color: #fff; }
.box { color: #000; }

.box 的属性为颜色：＃000; ，因为它是在最后添加的。

只需将您的代码更改为以下内容：

#menuIcon{
    display:none;
}

@media screen and (min-width:320px) and (max-width:640px){
   .menuRight{
       display:none;
   }

   #menuIcon{
       display:block;
       float:right;
       cursor:pointer;
   }
}

响应式菜单图标问题

3 个答案: