使用CSS在iOS上正确使用高分辨率精灵有什么用？

Question

我在使用高分辨率（2x）版本的导航精灵试图让我的精灵出现在iPhone4 +上时遇到了一些麻烦。这是我现在正在使用的代码。

.pixelj a, .games a, .team a, .forums a {
    width: 156px;
    height: 35px;
    background-image: url('/assets/blogtext2x.png');
    background-repeat: no-repeat;
/*  background-size: 156px 17px;*/  
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    float: left;
    }

正如您所看到的，这是一个导航，其中我在单个sprited图像中包含所有导航字元素。我尝试使用“background-size”，但只是将整个精灵压缩到提供的宽度/高度。如果我摆脱它它会显示2x图像，但不会使它们50％，所以他们可以正确查看。

我在这里做错了什么？这是我用来定位高分辨率设备的@media查询：

@media (min--moz-device-pixel-ratio: 1.5),
  (-o-min-device-pixel-ratio: 3/2),
  (-webkit-min-device-pixel-ratio: 1.5),
  (min-device-pixel-ratio: 1.5),
  (min-resolution: 1.5dppx),
  (max-device-width: 640px) {

Answer 1

你在这里绝对正确。

基本上这里通过CSS在精灵中提供'视网膜'图形的过程是：

• 设置您的普通精灵，在CSS中使用相关的定位/等来提供给非视网膜设备，
• 设置此图片的背景尺寸
• 使用媒体查询将图像的@ 2x变体提供给支持它的设备。

要记住几件关键事项：

• 设置background-size需要使用不同供应商前缀的多个声明来获得最佳浏览器覆盖率 - 请参阅下面的代码以了解我的意思
• background-size是背景图像的非视网膜变体的大小，而不是它所在元素的大小。因此，如果正常大小的精灵图像是200px乘400px（高分辨率版本是400px乘800px），那么你声明它是200px 400px。
• background-size值声明为<width> <height>。
• 您必须在第一个声明中声明background-size，而不是在视网膜媒体查询覆盖中声明。
• 虽然使用@2x正在变得普遍，但在网页开发中并不重要：您可以使用完全不同的图像名称。

在没有所有代码或实时网址的情况下帮助您解决特定问题非常困难，但这是一个高级示例。

在这个例子中，我有一个背景图像，宽100像素，高50像素，位于元素的中间

/* the element */
.element{
    background: url(../img/site/background-image.png) 50% 50% no-repeat;

    /* vendor-specfic declarations for background-size */
    -webkit-background-size: 100px 50px;
    -moz-background-size:  100px 50px;
    -o-background-size:  100px 50px;
    background-size:  100px 50px;
}

/* for retina users */
@media screen and (-webkit-min-device-pixel-ratio: 2), 
screen and (max--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2){ 
    .element{
        /* we only over-write background-image here */
       background-image: url(../img/site/background-image@2x.png);
    }
}

这意味着属于第二个媒体查询的设备将加载背景图片的@2x版本，并将其缩放为声明的background-size尺寸。

因为图像缩放回你设定的尺寸，如果你正在使用精灵，你只需要像往常一样声明所有元素的background-position，而不是两次来说明更大的视网膜图形尺寸。

修改 现在看到了您的网站，我可以确切地看到您在导航中遇到的问题：

这看起来像你的CSS的原因（style2.css的第972行）：

.pixeljam a, .games a, .team a, .forums a {
    background: no-repeat url('/assets/blogtext2x.png');
}

如果您将其更改为background-image并删除no-repeat，那么它将有效（否则background将重置之前的背景位置。）

.pixeljam a, .games a, .team a, .forums a {
    background-image: url('/assets/blogtext2x.png');
}