视网膜显示图像尺寸

Question

我已经创建了2个大小 40px X 40px 和 80px X 80px 的图标，分别用于正常显示和视网膜显示。

使用这两种尺寸的图标的正确方法是什么？

我的意思是我应该将视网膜版本的元素尺寸更改为80px X 80px，还是使用background-size属性来适应40px X 40px尺寸的大图标？

Answer 1

您应该遵循Apple的Safari Web内容指南。

Specifying a Webpage icon

Answer 2

这取决于您使用这些“图标”的方式。它们是网络应用程序图标，网页中的图像还是背景图像？

首先，视网膜图像应以@ x2.e.g命名。

标准

  

sample.png

<强>视网膜

  

sample@x2.png

对于网络应用程序图标，请参阅cpattersonv1的上一个答案

背景图片

这可以通过使用媒体查询来实现。针对具有视网膜功能的设备的媒体查询将如下所示。

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}

然后，您可以在媒体查询中为背景图像指定视网膜图像。

Answer 3

我发现我需要保持CSS中的尺寸对于普通版和ratina版都相同，并使用background-size属性在正常尺寸中拟合大图像。