0

スプライトに問題があります。私の問題は、メニュースプライトと網膜メニュースプライトがあることです。しかし、何らかの理由で Retina スプライトの 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 にアップロードできません。すべての回答に感謝します!

4

1 に答える 1

0

ＯＰ、

メディア クエリの構文にエラーがあります。メディア クエリは{}、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;
          }
      }
于 2013-03-13T23:43:35.500 に答える