Html 使用x2图像显示CSS

我使用此查询来识别视网膜显示：

 for none retina displayes
 .logo {
       background-position: -242px -138px;
       width: 67px;
       height: 14px;
 }

 @media
 only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and ( min--moz-device-pixel-ratio: 2),
 only screen and ( -o-min-device-pixel-ratio: 2/1),
 only screen and ( min-device-pixel-ratio: 2),
 only screen and ( min-resolution: 192dpi),
 only screen and ( min-resolution: 2dppx) {
     .logo, arrow, ... {
       background: url(../img/sprites_2x.png) no-repeat;
     }

      .logo {
         background-position: -336px -20px;
         width: 134px;
         height: 28px;
      }
 }

---

现在这并不能解决问题，因为图像的大小不是2倍。如何编写我的css，使其在视网膜显示中使用正确的图像比例和比例。

我使用了两种不同的精灵。不仅图像是2倍，而且顺序也不同

使用在同一位置上有图像的精灵图纸，然后这就是css

 .left, .right, ... {
      background-image: url(../img/sprites.png);
      background-repeat: no-repeat;
 }

 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
.left, .right, ... {
   background-image: url(../img/sprites_2x.png);
   background-size: size of the sprite.png;
}

.left {
   background-position: sprite.png position;
   width: sprite.png width;
   height: sprite.png height;
}

---

我想命名视网膜图像的标准是在文件名上加上@2x

这个怎么样

/* for non retina display */    
.logo {
   background: url(../img/sprites.png) no-repeat;
   background-position: -242px -138px;
   width: 67px;
   height: 14px;
}

/* for retina display, using media query and @2x flag */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    .logo {
        background: url(../img/sprites@2x.png) no-repeat;
        background-position: -336px -20px;
    }
}

或者你可以用它来放松