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

将max-device-width更改为max-width

@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/

无法使媒体查询生效

2 个答案: