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; 
      } 
     }