1

所以我已经阅读了一些关于网站视网膜图形的东西，因为我的大多数图像都可以是 2X，我猜：为什么不呢，而使用@media queries.

但是，我能找到的关于尺寸的所有信息都是您应该指定尺寸，但我想知道：使用background-size:cover!

如：

div {
    background-image: url('../images/foo.png');
    background-size:cover;
    height:100%;
    width:100%;
    // max-size:1920px by X
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1921px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1921px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1921px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1921px),
only screen and (                min-resolution: 192dpi) and (min-width: 1921px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1921px) {
    div {
        background-image: url('../images/foo@2x.png');
        background-size:cover;
        height:100%;
        width:100%;
        // min-size:1921px by X
    }
}

第二个问题，如果可以的话：如果您的图像最大约为 2400x1380，但访客机器的最大分辨率为 2880x2160，如 Macbook 15" 视网膜 - 因此无法提供完整的 @2X 体验 -无论如何提供@2x，还是提供常规的、最大 1920 像素的图像？

第三，关于 1 和 2 - 使用:cover时，您没有指定尺寸，因此不知道 @2x 图像的最小值。考虑到这一点，有没有办法说“对于视网膜图像和使用:cover，你的图像至少应该是这个尺寸”？

谢谢！

4

1 回答 1

1

要回答您的第一个问题：是的，您可以使用 background-size:cover 重新调整图像。如果您定义一个 div 并让它的背景被具有两倍尺寸的图像覆盖，它将是视网膜 (@2x)。

对于您的其他问题，我不会详细说明或回答它们，因为我觉得您尝试做的实际上不是针对视网膜进行优化的正确方法！

我发现最适合所有设备处理视网膜图像的最佳解决方案是使用@media 查询为特定客户端设备提供最佳图像（例如@1.5x、@2x、@3x，...）。查看我的博客文章以获得完整的解决方案： http: //blog.benmarten.me/best-way-to-optimize-website-images-for-all-possible-retina-sizes/

于 2014-10-14T00:10:11.093 回答