Retina-Sprite CSS不起作用

Question

我遇到了我的精灵问题。我的问题是我有一个菜单精灵，以及视网膜菜单精灵。但由于某种原因，视网膜精灵的Css不起作用。这里是我的代码：

@media only screen and (-webkit-min-device-pixel-ratio: 2.0), 
    only screen and (min--moz-device-pixel-ratio: 2.0), 
    only screen and (-o-min-device-pixel-ratio: 200/100), 
    only screen and (min-device-pixel-ratio: 2.0) { 
.menu li a, 
    background-image:url('images/sprite@2x.png'); 
    -webkit-background-size: 110px 55px; 
    -moz-background-size: 110px 55px; 
    background-size: 110px 55px; 
    } 

现在，这里的普通导航精灵：

.menu li a{background: url('images/sprite-nav.png') no-repeat;width: 100%;height: 100%;display:block;} 
.menu li.services{width: 110px;height: 55px;} 
.menu li.services a{background-position: 0px -300px;} 
.menu li.services a:hover{background-position: 0px 0px;} 

顺便说一句，在菜单中有一个以上的图像（例如我只需添加更多的菜单里的，代之以“服务”下一个菜单项。）

对不起，我不能上传到jfiddle，因为我不熟悉它。 所有答案赞赏！

Answer 1

OP，

您在媒体查询语法中有错误。媒体查询应围绕CSS定义包装{}。 .menu li a之后，您还错过了{。看起来你有一个逗号。

这里是修正版本：

@media only screen and (-webkit-min-device-pixel-ratio: 2.0), 
     only screen and (min--moz-device-pixel-ratio: 2.0), 
     only screen and (-o-min-device-pixel-ratio: 200/100), 
     only screen and (min-device-pixel-ratio: 2.0) { 
      .menu li a { 
       background-image:url('images/sprite@2x.png'); 
       -webkit-background-size: 110px 55px; 
       -moz-background-size: 110px 55px; 
       background-size: 110px 55px; 
      } 
     }