是否有CSS精灵生成器也提供视网膜逆转？

Question

如果已经没有,我会非常感激,如果有人可以自己做一些如何制作视网膜和非视网膜CSS精灵的说明.如果可能,最好在过程中使用一些CSS sprite -generator.

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

谢谢大家!

Answer 1

方法1

这是使用Compass实现这一目标的Mixin

方法2

1. 创建两个版本的图像文件,一个用于"常规"密度屏幕,另一个用于视网膜屏幕,图像分辨率是两倍.(意思是如果其中一张图片是23像素x 41像素,视网膜版本将是46像素×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%).