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

顺便说一句，菜单中有多个图像，（例如，我只需添加更多菜单li并用下一个菜单项替换'services'。）

抱歉，由于我不熟悉，我无法上传到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;
          }
      }

Retina-Sprite CSS不起作用

1 个答案: