Stylus/SpriteSmith - 使用相同的 sprite 文件提供 2x (Retina) 图像？

Question

我正在使用 Stylus + Rupture + SpriteSmith + Gulp.JS 我想知道是否可以使用相同的 sprite.png 文件提供图像的 2x 版本？

Answer 1

找到解决方案。

我们实际上可以从同一个 sprite 文件提供我们图像的 2x 版本。

主要思想是在媒体查询中，我们必须将所有数字除以 2，然后添加 background-size 属性.

如果您使用的是 plain CSS 或 Stylus，您可以使用类似：

#logo {
    background-image: url("sprite.png");
    background-position: -230px -93px;
    height: 60px;
    width: 45px;
}
@media not all, only screen and (min-resolution: 1.5dppx), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
#logo {
    background-position: -70px 0;
    background-size: 150px 93.5px;
    height: 60px;
    width: 45px;
}
}

注意：我们的精灵的真实位置、大小和尺寸是不同的，但我们实际上是在缩小精灵图像并相应地改变位置。

如果您使用 Stylus + SpriteSmith，您可以编写一个 Sprite_2x 函数，如下所示：

spriteWidth_2x($sprite) {
  width: ($sprite[4]/2);
}

spriteHeight_2x($sprite) {
  height: ($sprite[5]/2);
}

spritePosition_2x($sprite) {
  background-position: ($sprite[2]/2) ($sprite[3]/2);
}

spriteImage_2x($sprite) {
  background-image: url($sprite[8]);
}

sprite_2x($sprite) {
  spriteImage_2x($sprite)
  spritePosition_2x($sprite)
  spriteWidth_2x($sprite)
  spriteHeight_2x($sprite)
  background-size ($spritesheet_width / 2) ($spritesheet_height / 2)
}

顺便说一句，我不明白为什么很多文章建议对 2x 图像使用单独的精灵文件。我相信这样我们可以减少 1 个额外的请求，这样效率更高。我不知道也许我错了。我是新手。

Stylus/SpriteSmith - 使用相同的 sprite 文件提供 2x (Retina) 图像？

Stylus/SpriteSmith - Serve 2x (Retina) images using same sprite file?

stylus

css-sprites

gulp

我们实际上可以从同一个 sprite 文件提供我们图像的 2x 版本。