5

如果还没有，我将非常感谢有人能提供一些关于如何自己制作视网膜和非视网膜 CSS 精灵的说明。如果可能的话，最好在过程中使用一些 CSS sprite -generator。

相关主题： http: //miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

谢谢大家！

4

5 回答 5

5

方法一

这是一个使用Compass实现此目的的 Mixin

方法二

  1. 创建两个版本的图像文件，一个用于“常规”密度屏幕，另一个用于视网膜屏幕，图片分辨率是两倍。（意思是如果其中一张图片是 23 像素 x 41 像素，视网膜版本将是 46 像素 x 28 像素）
  2. 转到http://spritegen.website-performance.org/并创建两个版本的精灵图像。假设您的图像尺寸小于 25 像素。选择水平偏移：第一个非视网膜版本为 25px，视网膜版本为 50px。将您的精灵保存为 sprite.png 和 spritex2.png

  3. 在您的 css 文件中，您现在可以大致定义以下内容：

    .#spriteA,spriteB{
     background-image: url(sprite.png);
     width:25px;
     height:25px;
 }        

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.#spriteA,spriteB{
     background-image: url(spriteX2.png);
     width:25px;
     height:25px;
 }
}

.spriteA{ background-position: 0 50%; }
.spriteB{ background-position: -31px 50%; }

这样，无论您使用非视网膜分辨率还是视网膜分辨率，都可以保持背景位置比率 (50%)。

于 2013-03-17T11:33:15.793 回答
2

这是另一个用于创建低和高清晰度视网膜精灵的在线工具：cssspritegenerator.net

也可以生成 webp 图像，并且图像越大，尺寸越大，所以我们需要将它们缩小回@1-size sprite，图像格式更好；)

于 2014-01-15T21:41:08.073 回答
1

There are some task managers, mixins and online generators for this objective. I personally use grunt as a task manager and Sprite Smith as a module on some of my projects.

I also use http://www.retinaspritegenerator.com for quick sprite generation with retina support. It also has a selection of sequence algorithms like Sprite Smith.

于 2015-06-02T09:33:15.380 回答
0

我知道这是一个较旧的问题，但添加此回复以防其他人遇到类似问题。

我对smartsprites工具进行了一些更新，以便能够支持视网膜精灵。使用这个工具，你基本上用指令来注释你的 CSS，告诉工具哪些图像要精灵，运行工具，它将生成精灵图像和修改后的 CSS 以引用新图像。

此工具为您提供细粒度的支持，包括对哪些图像进行精灵化、精灵的布局方式以及每个图像精灵填充等。希望能帮助到你！

于 2013-07-26T16:55:06.313 回答
0

There are some amazing retina sprite generators out there. I recently used a couple of them which I personally love. 1. Sprites 2. Sprite box 3. Retina Sprites 4. Zero Sprites 5. Sprite Generator

As mentioned in the previous answer, Sprite Smith is one more awesome generator.

于 2016-07-21T21:17:36.967 回答