html - 将 x2 图像用于 Retina 显示 CSS

Question

我正在使用此查询来识别视网膜显示器:

 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，以便它为视网膜显示器使用正确的图像比例和比例。

Answer 1

我使用了两个不同的 Sprite 。不仅图像是 2x，而且顺序不同。

使用在相同位置有图像的 sprite-sheets，然后这是 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;
}