css - 视网膜显示图像尺寸

Question

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

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

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

Answer 1

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

指定网页图标

Answer 2

这取决于您如何使用这些“图标”。它们是 Web 应用程序图标、网页中的图像还是背景图像？

首先应该用@x2.eg 命名视网膜图像

标准

样本.png

视网膜

样品@x2.png

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

背景图片

这可以通过使用媒体查询来实现。针对支持 Retina 的设备的媒体查询看起来像这样。

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

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

Answer 3

我发现我需要在 CSS 中保持正常和 ratina 版本的尺寸相同，并使用background-size属性将大图像适合正常尺寸。