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

Btw, меню имеет более одного изображения (например, я просто добавить больше меню Ли и заменить «услуги» с следующий пункт меню.)

Извините, что я не могу загрузить в jfiddle, поскольку я не знаком с ним. Все ответы оценены!

Answer 1

О.П.,

У Вас есть ошибка в вашем синтаксисе медиа запросов. Запрос СМИ должен обернуть {} вокруг определения 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; 
      } 
     }