如果图像是背景图像话，使用媒体查询，可以根据可视窗口的尺寸来决定使用的背景图像 …

这里我准备了一张 480px 的背景图像 … 为了区别一下 … 在图像上，我添加了一个标示 …

决定把这张背景图像，应用在可视窗口宽度小于或者等于 480px 的时候 …

我们先去改造一下 showcase 里的背景的样式的写法 …

bgi

bgp50p50p

bgrn

background-image: url(../images/01.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;

这样的话，在其它的媒体查询里，我们可以直接使用 background-image ，去覆盖掉默认的背景图像 ….

在样式表的最下面，去定义一个媒体查询 … @media (max-width:480px){}

当可视窗口小于或者等于 480px 的时候 … 应用在大括号里定义的样式 …
#showcase{}

bgi ..images/01_s.jpg …

我们把背景图像改成了 01_s.jpg … 这张图像的宽度是 480px …. 保存一下 ….

打开浏览器 … 调整窗口宽度 … 窗口宽度小于等于 480px 的时候 … 背景图像会变成 01_s.jpg 这张图像 …

下面我们使用 iOS 模拟器，去预览一下 ….

现在用的是普通屏幕的 iPhone … 垂直状态下，它的宽度是 320px … 所以，会使用 480px 的背景图像 …

调整成水平方向 … 这样，设备的宽度就变成了 480px ，也会应用 480px 的背景图像 …

下面我们换成 Retina 屏幕的 iPhone 去试试看 …

同样会使用 480px 的背景图像… 不过 Retina 屏幕的 iPhone ，垂直状态下，水平可以显示 640 个像素 ….

而我们的背景图像的宽度是 480px .. 所以，你会发现 … 图像会被拉伸 …. 这样会变得有点模糊 ….

下面视频，我们再去解决这个问题 …