mbp 外接显示器视网膜_视网膜显示已准备就绪，可进行媒体查询

苹果通过Retina显示屏为设备屏幕分辨率设定了新标准。拥有百万像素的Retina显示屏可在屏幕上提供更生动，更详细和更清晰的图像。但是，这会影响设计人员和开发人员在这些设备上交付图像的方式，因为未针对高分辨率屏幕进行优化的图像看起来会比恒星图像要差。

因此，在今天的帖子中，我们将研究如何提供针对高分辨率屏幕优化的特定图像。

使用矢量图形

首先，如果图像不需要逼真度或复杂的配色方案 ，则使用矢量图形可能是您的最佳选择。与栅格图像不同，矢量图形不依赖于像素 ，因此在任何屏幕分辨率下，它都将显示得清晰细腻。

有几种方法可以在网络上添加矢量图形，我们既可以使用SVG，字体，也可以使用先前在以下主题中讨论过的Canvas：

可扩展矢量图形系列
指南：使用Web字体的更好，更清晰的UI图标

使用媒体查询

还有另一种方式。我们可以使用Media Query有条件地提供针对特定屏幕分辨率的优化图形。语法类似于用于建立响应式布局的媒体查询。但是，不是指定视口宽度断点，而是指定设备像素比率（dpr）和屏幕分辨率阈值。

@media     only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {/* Style Rules */
}

在上例中显示的Media Query将为屏幕分辨率分配样式，这些样式的最小设备像素比率为2或最小分辨率为192dpi 。

我们可以通过将屏幕分辨率除以对角线英寸来获取dpi值。

例如，一个分辨率为1280×800的13.3英寸屏幕将为我们提供96（dpi）。因此，我们在上面的代码片段中显示的196的数量只是该数字（96dpi）的两倍左右。

在获得设备像素比率方面，这是相当科学的。但是，如果您热衷于进行数学运算，那么HTML5 Rocks的Boris Smush将在本文中向您展示如何进行。

另外，我们也可以通过window.devicePixelRatio查询像素比率数。在下面的示例中，我们从window.devicePixelRatio返回带有警报窗口的值。

var dpr     = window.devicePixelRatio;
alert('Device Pixel Ratio: ' + dpr);

这将在Retina显示屏上使用以下结果，例如新的MacBook Pro和iPhone 4。

在非Retina显示屏中，数字将返回1 。

此外，以下是一些流行设备的设备像素比率列表，供您参考。

设备	设备像素比
iPhone 4，iPhone 4S，iPhone 5，iPod Touch	2
带视网膜显示屏的iPad	2
Galaxy Nexus，Galaxy Note，Galaxy SIII	2
Kindle Fire HD	1.5
Galaxy S Plus，Galaxy SII	1.5

从表中，您可以看到有一些1.5 dpr的高清屏幕。因此，最好在Media Query中将最小阈值设置为1.5，以涵盖更多的屏幕分辨率。

@media    only screen and (min-device-pixel-ratio: 1.5),only screen and (min-resolution: 192dpi) {/* style rules */
}

另外，为了在浏览器之间实现更广泛的兼容性，我们还可以添加min-device-pixel-ratio及其各自的供应商前缀，如下所示。

@media     only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (   min--moz-device-pixel-ratio: 1.5),only screen and (     -o-min-device-pixel-ratio: 3/2),only screen and (        min-device-pixel-ratio: 1.5),only screen and (min-resolution: 192dpi) {/* Style Rules */
}

例

我们已经创建了一个演示页面。在此页面中，我们分配了两种图像格式：用于常规屏幕分辨率的.png图像和用于高清屏幕的SVG，将通过Media Query进行分配，就像这样。

a {background-image: url('img/hongkiatcom.png');background-size: 100%;background-repeat: no-repeat;
}
@media     only screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (   min--moz-device-pixel-ratio: 1.5),only screen and (     -o-min-device-pixel-ratio: 3/2),only screen and (        min-device-pixel-ratio: 1.5),only screen and (min-resolution: 192dpi) {a {width: 100%;background-image: url('img/hongkiatcom.svg');background-size: 100%;background-repeat: no-repeat;}
}

现在，您可以通过正常和Retina显示屏测试演示。它还将显示图像名称，该名称将显示在页面上。

观看演示
下载源