在X瀏覽器寬度崩潰導航欄@media查詢不起作用

Question

嗨，大家好，只是想知道爲什麼我不能讓我的媒體查詢縮小我的導航欄。我有以下的CSS：

@media only screen and (min-device-width:1024px) 
{ 
    div.large-7.push-5.columns.last{ 
    height: emCalc(1px); 
} 
} 
@media only screen and (max-device-width: 745px){ 
    .top-bar .toggle-topbar.menu-icon a { 
    color: $steel; 
    height: 34px; 
    line-height: 33px; 
    padding: 0 25px 0 0; 
    position: relative; 
} 
    .top-bar .toggle-topbar.menu-icon a:after { 
    box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel; 
    content: ""; 
    display: block; 
    height: 0; 
    position: absolute; 
    right: 5px; 
    top: 0; 
    width: 16px; 
} 
} 
@media only screen and (max-device-width: 480px) { 

一切都會按計劃在移動，但在臺式機/筆記本電腦的瀏覽器窗口，它不會響應像我想的時候我縮圍繞745px標記的瀏覽器。我不知道爲什麼，也無法在這個問題上找到任何幫助。如果您希望看到該網站的行動，它是www.omegadesignla.com。預先感謝真棒輸入和upvotes。

Answer 1

媒體查詢通常應使用最小寬度和最大寬度而不是最小設備寬度和最大設備寬度，後兩者由設備固定，而不管窗口大小如何。

Answer 2

更改CSS規則，這一點：

@media only screen and (min-width:1024px) 
{ 
    div.large-7.push-5.columns.last{ 
    height: emCalc(1px); 
} 
} 
@media only screen and (max-width: 745px){ 
    .top-bar .toggle-topbar.menu-icon a { 
    color: $steel; 
    height: 34px; 
    line-height: 33px; 
    padding: 0 25px 0 0; 
    position: relative; 
} 
    .top-bar .toggle-topbar.menu-icon a:after { 
    box-shadow: 0 10px 0 1px $steel, 0 16px 0 1px $steel, 0 22px 0 1px $steel; 
    content: ""; 
    display: block; 
    height: 0; 
    position: absolute; 
    right: 5px; 
    top: 0; 
    width: 16px; 
} 
} 
@media only screen and (max-width: 480px) {