视网膜精灵的媒体查询

Question

我想创建两组精灵，一组用于普通 dpi 屏幕，一组用于视网膜 dpi 屏幕。

我实际上已经使用gulp.spritesmith来生成代码，但无法弄清楚为什么它不起作用。两个图像都存在，我可以看到生成的 css 看起来正确，它会加载不同的图像并更改背景大小，这是应该的，但是当我在 macbook Pro 视网膜上查看页面时，它仍然加载常规精灵，而不是视网膜精灵（媒体查询不起作用）。

.compatibility-icon {
  background-image: url(/img/sprites/sprite.png);
  background-position: -117px 0px;
  width: 80px;
  height: 80px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .compatibility-icon {
    background-image: url(/img/sprites/sprite-2x.png);
    background-size: 197px 160px;
  }
}

Answer 1

这实际上有效，问题是 gulp 配置问题。

.compatibility-icon {
  background-image: url(/img/sprites/sprite.png);
  background-position: -117px 0px;
  width: 80px;
  height: 80px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .compatibility-icon {
    background-image: url(/img/sprites/sprite-2x.png);
    background-size: 197px 160px;
  }
}