对于大密度屏幕的设备，比如视网膜屏幕的 iPhone … 图像如果想要显示的清晰，我们可以使用两倍宽度的图像，比如你想让一张图像在 480px 这个宽度显示的清晰，你需要准备一张 960px 宽的图像。

对于 iPhone 来说，这个比例是两倍，不过有些设备，它的屏幕密度可能会更高 … 那么这个倍数就会增加…. 有可能是 3 倍 … 或者更高 …

这个倍数，就是之前我们介绍的 CSS 像素比例，或者设备像素比例 …

这里我准备了一张 960px 宽的背景图像 … 把它应用在可视窗口小于等于 480px 并且 CSS 像素比例大于等于 2 的设备上 …

媒体查询

打开样式表，在样式的最下面 … 先去设置一条媒体查询 … @media 括号 .. max-width 是 480px … 还要加上一个条件，中间用 and 连接 …

括号 … min-resolution:2dppx … 这里是标准的写法 … 使用 resolution 这个媒体特性 … 单位用的是 dppx … 代表 CSS 像素的比例 …

因为 webkit 核心的浏览器还不认识这个 resolution … 所以我们要用 device-pixel-ratio 来代替….

中间我们使用一个逗号分隔一下不同的媒体查询 … 这个逗号就表示 或 ….

max-width:480px …. and …. 括号 … 前面加上 -webkit- 这个前缀 … min-device-pixel-ratio:2 ….

@media (max-width:480px) and (min-resolution:2dppx), (max-width:480px) and (-webkit-min-device-pixel-ratio:2){
#showcase{
background-image: url(../images/01_s_2x.jpg);
}
}

这样，不管哪条媒体查询返回真 … 都会应用在大括号里的样式…

在这里，重新定义一下 #showcase 的背景 …. 背景图像是 01_s_2x.jpg … 这是一张 960px 宽的图像 …

保存 ….

打开浏览器 …. 缩小可视窗口的宽度 … 当小于等于 480px 的时候 … 背景图像会使用 480px 宽的图像 …

因为我们的屏幕的 CSS 像素比例是 1 …

再打开 iOS 模拟器 … 现在我们用的是视网膜屏幕的 iPhone … 它的 CSS 像素比例是2 …. 当前的可视窗口宽度是 320px ，小于 480px，

两个条件都符合 …

所以，你会看到 …. 会使用 960px 的背景图像 ….