Question

设备及其性能总是与时俱进。事实上，我们不仅仅要面对不同的视口尺寸，还得考虑高分辨率显示屏。iPhone 4是第一款被广泛使用的高分辨率设备。它的屏幕大小为960乘以640像素，分辨率为每英寸326个像素，是上一个版本iPhone（iPhone 3GS）及2011年的15" MacBook Pro笔记本分辨率的两倍。预计其他设备，从平板电脑到笔记本电脑再到台式机都会跟风。幸好，我们的响应式工具已经提供了方法，可以为这类设备提供增强支持。

假设我们要为使用高分辨率设备的用户加载一个高分辨率版本的网站标志图片。最近在重新设计个人网站http://www.benfrain.com时，我就遇到了这种情况。我的网站标志区域的代码如下：

对应的CSS规则如下：

最初显示效果如下：

看起来很好，但我想让标志在高分辨率设备上也尽可能清晰。所以，我制作了两个新版本的图片（一个用于默认状态，一个用于悬停状态），图片尺寸是原来的两倍，然后将其分别命名为logo2@x2.png和logo2Over@x2.png。之后在CSS中追加如下代码：

上面的媒体查询匹配最小设备像素比为1.5的设备。因此，像iPhone 4以及后续出现的高分辨率设备就会使用该媒体查询内的样式。你可能注意到样式中包含了-webkit-前缀。和以前一样，记得针对各种设备添加对应的私有前缀。

现在，在高分辨率设备上就会显示对应的高分辨率标志图片，效果如下：

无法否认，修改前后的差别微不足道。你最好还是使用真机亲身体验一下那种微妙的差别，图片的细节越丰富，在高分辨率屏幕上显示的效果也就越清晰。

使用这个技巧时需要慎重。图片尺寸越大，文件体积也越大，所需的加载时间会更长，所以再重申一遍：你可以这么做，但不一定应该这么做。

另外，如果浏览器支持可缩放矢量图形（SVG），那使用该技术替代图片可以解决我们目前面临的很多图片缩放问题。顾名思义，可缩放矢量图形能生成可任意缩放但显示清晰的矢量图片。不过，媒体查询和SVG对嵌入在页面中的高分辨率图片无能为力。在这种情况下你需要考虑基于JavaScript的解决方案。