无法让媒体查询起作用

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/