響應式菜單圖標問題

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