在视网膜显示的模糊的象

Question

在我的在线应用程序中，我有一些自定义图标，这些图标都在一个精灵文件中。当我在带有视网膜显示屏的设备上查看网站时，图标模糊

如何让它们更清晰？

Answer 1

一种方法是使图像变大（如2x），然后在浏览器中调整大小 - 如果图像是内联的，则设置宽度/高度;如果将它用作背景，则设置为background-size属性图像（如果你将它用作精灵，可能就是这样）。

这里有一篇非常有用的文章可以很好地解释概念或视网膜就绪图像：http://blog.netvlies.nl/design-interactie/retina-revolution/

Answer 2

Retina的设备像素比为2倍，因此您的图像会模糊不清。

实施例

如果您的图像是20x20，则视网膜中的图像必须为40x40才能使其清晰。您可以使用css媒体查询来交换图像。

在这里，我找到了一些有用的链接。

http://www.hongkiat.com/blog/css-retina-display/

@media  only screen and (min-device-pixel-ratio: 2),   
        only screen and (min-resolution: 192dpi) {  
    /* Your 2x Sprite in here */  
}