响应式菜单图标问题

Question

我遇到问题。我有一个菜单，但我想使它响应与按钮单击（字体真棒）当我设置显示：无;然后在媒体查询上显示：阻止，我的图标不会出现..请帮助。

HTML：

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

CSS：

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

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

#menuIcon{ 
    display:none; 
} 

Answer 1

在上面的代码中，display：none;低于display：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具有更高优先级添加的代码最后。

例如

.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; 
    } 
}