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

我使用了两个不同的精灵。不仅图像是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;
}

Answer 2

我认为命名视网膜图像的标准是在文件名上添加@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;
    }
}

或者您可以使用retina js来缓解

使用Retina的x2图像显示CSS

2 个答案: