Question

我的背景图片在windows operating system看起来很好，但在retina ready devices看起来很混乱。现在我想在视网膜准备设备中用高分辨率图像替换背景。实现它的最佳方法是什么？可以使用media queries还是使用javascript或其他任何内容？

Answer 1

您通常可以使用以下媒体查询target high DPI (Dots Per Inch) displays：

@media only screen and (min-device-pixel-ratio: 2) {
    /* high-DPI stuff here */
}

请注意，这将针对符合比率要求的任何内容。

如果您想专门定位Retina显示器，则需要添加一些内容以使媒体查询更具体。 Chris Coyier就是这样做的：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

所有这些不同的定位方法都有different levels of support，因此了解一些非常有用。

可能已经存在多个满足这些条件的设备，因此您可以通过使用额外条件使其更具体，以另一种方式定位。

例如，以Retina iPhone 5 / 5S / 5C为目标，你可以使用它：

@media (-webkit-min-device-pixel-ratio: 2) and (width:640px) and (orientation:portrait) { 
    /* Retina-specific stuff here */
}

@media (-webkit-min-device-pixel-ratio: 2) and (width:1136px) and (orientation:landscape) { 
    /* Retina-specific stuff here */
}

但与往常一样，不建议针对特定设备，这是一项永无止境的工作量。

替换视网膜准备设备的背景图像

1 个答案: