响应式css精灵&x2B；视网膜

在过去的几天里，我读了很多关于这个话题的文章，但我没有找到解决办法。我有两个sprite集，一个用于正常显示的低质量集，另一个用于视网膜显示的高质量集

我的问题是，我的网站必须响应，图形应该根据浏览器窗口调整大小。但是使用

background size

属性，我似乎无法告诉浏览器调整精灵的大小。以下是我到目前为止得到的信息：

#logo-img {
  max-width: 100%;
  text-indent: -9999px;
  height: 85px;
  width: 360px;
  background-image: url('/images/sprites-sa026cef942.png');
  background-position: 0 -2609px;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: 0 none !important;
  display: block;
  white-space: nowrap;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
    #logo-img {
      background-image: url('/images/sprites-retina-se61e802cf4.png');
      background-position: 0 -2601px;
      -webkit-background-size: 360px, auto;
      -moz-background-size: 360px, auto;
      -o-background-size: 360px, auto;
      background-size: 360px, auto;
    }
}

HTML是

<a href="#" id="logo-img">
  <h1>My logo text</h1>
</a>

这很有效，但我不能用精神病床。也许这说明了我的意思

EDIT2

---

我做了一把小提琴

我想你需要从

背景尺寸

行中删除逗号，你可能还需要将高度设置为

85px

：

-webkit-background-size: 360px 85px;
-moz-background-size: 360px 85px;
-o-background-size: 360px 85px;
background-size: 360px 85px;

---

但我认为逗号是这里的主要问题。这对您有帮助吗？

我认为您需要从

背景大小

行中删除逗号，您可能还需要将高度设置为

85px

：

-webkit-background-size: 360px 85px;
-moz-background-size: 360px 85px;
-o-background-size: 360px 85px;
background-size: 360px 85px;

---

但我认为逗号是这里的主要问题。这对你有帮助吗？

hmmmm，这很奇怪，因为背景大小的东西是通过Compass（）生成的。但我试过了，但没用，里面的雪碧还是被切掉了。还有其他想法吗？你有活的例子的链接吗？或者您可以创建一个JSFIDLE来显示您的问题吗？顺便说一句，调整浏览器的大小不会影响

设备像素比

，因此您可能无法在浏览器中测试效果，而只能在具有相应分辨率的设备上测试。我做了一个FIDLE:。如果调整浏览器窗口的大小，则第一张luigi图片的大小不会调整，它基于精灵表。第二个是背景大小为

的单个图像：contain这会调整DHM的大小，所以您希望同时执行不同的操作。要调整徽标的大小，可以使用媒体查询
max width
，如本例所示：但这不会使用
设备像素比率。不过，由于精灵背景缩小到998px/2=499px的一半，您仍然可以获得更高分辨率的理想效果。不太确定，这是否有用。嗯，这很奇怪，因为背景大小的东西是通过Compass（）生成的。但我试过了，但没用，里面的雪碧还是被切掉了。还有其他想法吗？你有活的例子的链接吗？或者您可以创建一个JSFIDLE来显示您的问题吗？顺便说一句，调整浏览器的大小不会影响
设备像素比
，因此您可能无法在浏览器中测试效果，而只能在具有相应分辨率的设备上测试。我做了一个FIDLE:。如果调整浏览器窗口的大小，则第一张luigi图片的大小不会调整，它基于精灵表。第二个是背景大小为
的单个图像：contain这会调整DHM的大小，所以您希望同时执行不同的操作。要调整徽标的大小，可以使用媒体查询
max width
，如本例所示：但这不会使用
设备像素比率。不过，由于精灵背景缩小到998px/2=499px的一半，您仍然可以获得更高分辨率的理想效果。不太确定，这是否有帮助。