1

我在尝试使用我的导航精灵的高分辨率 (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;
    }

正如您所看到的，这是一个导航，其中我在单个精灵图像中拥有所有导航词元素。我尝试使用“背景大小”，但这只是将整个精灵压缩成提供的宽度/高度。如果我摆脱它，它会显示 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) {
4

1 回答 1

2

你在这里绝对是正确的。

本质上，这里通过 CSS 在 sprite 中提供“视网膜”图形的过程是：

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

有几个关键的事情要记住：

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

如果没有所有代码或要查看的实时 URL，很难帮助您解决特定问题，但这里有一个高级示例。

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

/* 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一样声明所有元素的 s ，而不是两次来考虑更大的视网膜图形尺寸。

编辑： 现在看到您的网站后，我可以确切地看到您在导航方面遇到的问题：

截屏

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

.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');
}
于 2013-06-06T15:59:11.750 回答