無法讓媒體查詢起作用

Question

我正在嘗試使用媒體查詢使我的佈局響應屏幕大小。我現在只是對它進行測試，並且我不能爲我的生活獲得工作方法。我簡單地設置了一個媒體查詢，當屏幕低於480px時，我的鏈接的背景顏色應該變爲紅色，但當我縮小屏幕時，它只是不起作用。

您可以在http://www.noellesnotes.com

在行動中看到任何幫助，將不勝感激。

這裏是培訓相關代碼：

HTML：

<div class="site-navigation"> 
    <a href="#">About</a> 
    <a href="#">Work</a> 
    <div class="site-title">Noelle Devoe</div> 
    <a href="#">Blog</a> 
    <a href="#">Contact</a> 
</div> 

CSS：

.site-navigation a{ 
    width: 125px; 
    float: left; 
    padding: 50px 0 50px 0; 
    letter-spacing: 4px; 
    text-transform: uppercase; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
    color: rgb(82,82,82); 
} 

.site-navigation a:hover{ 
    font-weight: bold; 
    background-color: rgb(242,168,134); 
    color: rgb(255,255,255); 
    text-shadow: rgb(200, 200, 200) 1px 1px 0px; 
} 

@media only screen and (max-device-width: 480px) { 
    .site-navigation a{ 
     background-color: red; 
     } 
    } 

Answer 1

改變你的最大設備寬度到最大寬度

@media only screen and (max-width:480px){ 
    .site-navigation a { 
     background-color: red; 
    } 
} 

應該爲你做好訣竅。也是一個偉大的頁面看，就是the media queries page on MDN

Answer 2

這樣使用它：

@media only screen and (max-width: 480px){ 


} 

這將是一個很好的閱讀http://css-tricks.com/snippets/css/media-queries-for-standard-devices/