如何在不同分辨率的不同设备上使用图像？答案

【问题标题】：how to use images on different devices on different resolution?如何在不同分辨率的不同设备上使用图像？
【发布时间】：2012-08-28 05:09:31
【问题描述】：

我正在使用 phonegap 制作 iphone 应用程序。我不确定如何正确使用图像来支持不同设备（iphone、ipad）上的所有不同分辨率。我用谷歌搜索了它，有人指出我应该为不同的屏幕使用不同的 css 文件。我真的希望应该有一个更简单的方法。

TIA

【问题讨论】：

【解决方案1】：

使用 CSS3 媒体查询来检测手机尺寸并使用正确的样式。此问题中提供了一个示例：PhoneGap + Android + media queries

示例（在您的 HTML 中）

<link rel="stylesheet" type="text/css" media="(max-width: 480px) and (max-device-width: 480px)" href="screen-small.css" />

【讨论】：

我明白了。我也想知道为什么人们使用两个不同的图像来获得不同的分辨率？为什么不只使用一张高分辨率图像并将其调整为较小的分辨率？
在响应式布局中，您可能需要调整内容显示的大小以更好地适应所使用的屏幕。例如，在宽度为 480 像素的设备上，显示 720 像素宽的图像是没有意义的。特别是在 iOS 的情况下，Retina 显示器将希望使用更高密度分辨率的图像来充分利用更好的 iPhone 屏幕。