我在互联网上读到过，我不应该用绝对像素高度/宽度/大小来定义字体（或任何东西），而是使用 EM ...以便在更高分辨率的显示器上，我的网站可以适当扩展。
但是，我用什么来定义 IMAGE 高度/宽度...因为图像不能很好地缩放（它们看起来像素化）
更新：
为了澄清，我不是指的是页面缩放。我指的是如何使我的 Web 应用程序分辨率独立，以便在更高 DPI 显示器上看起来正确。
【问题讨论】：
标签： html css resolution dpi resolution-independence
我知道这个问题有点老了，但想把这个问题放在那里，供以后可能出现的任何人使用。当谈到具有更高像素密度的移动设备时，移动浏览器会将页面放大一定量，以使其看起来好像网页不是很小。设备按照CSS 2.1 specification 实现此缩放。
例如，当今许多设备的像素密度比是桌面显示器的 1.5 倍。因此，移动浏览器会将网站缩放约 150% 以补偿额外的像素。新的 Retina 显示屏具有 2 倍的像素密度比……因此，浏览器将网站放大约 200%。
问题的重点 - 开发人员不必担心不同分辨率的设备。如果您希望图像在高分辨率设备上清晰显示，则需要更高分辨率的图像。您通常不必担心 1.5 倍设备，因为质量差异可以忽略不计，不值得付出努力。但是，新的视网膜显示器会导致一些非常模糊的图像，因此您应该使用 2 倍的图像。
因此，对于以下图像，您需要导出 600x400 像素的图像，以便图像在新的 Retina 显示屏上清晰显示：
<img src="photo.jpg" style="width:300px; height:200px" />
【讨论】：
字体大小应设置为 em（或 %），因为如果用户更改 IE 中的文本大小（视图 > 文本大小），则以 px 设置的文本（或在继承链的某处具有固定大小）不会被调整大小。 （其他浏览器调整以 px 为单位的文本大小没有问题。）请参阅How to size text using ems 了解更多信息。
当用户更改文本大小时，不会调整 px 尺寸的图像大小；尺寸为 em 的图像已调整大小。因此，如果图像的大小应该与文本大小相关（极少数情况），则使用 em。否则 px 尺寸就可以了。
对于页面缩放（浏览器将所有内容放大或缩小），使用 em 或 px 定义尺寸（文本或图像）无关紧要。
【讨论】：
通常，我对大多数元素使用 em，对图像使用精确像素。调整文本大小时，您的图像不会随其他所有内容缩放，因此您需要查看页面在不同文本大小下的外观并在需要时进行调整，但我认为这是一个合理的折衷方案（与缩放图像相比）。
【讨论】：
在IE中调整文本大小时使用em，变大时会变大，变小时会变小。
适用于所有浏览器的解决方案是为 body 元素设置默认的字体大小百分比：
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
http://w3schools.com/css/css_font.asp
您可以在此处找到使用 px 和源代码的完美图像样式示例：http://w3schools.com/css/css_image_gallery.asp。图像随着文本的增加或减少而完美缩放。
【讨论】：
查看本页的解决方案
http://nickcowie.com/2005/elastic-images/
HTML
<div class="imageholder">
<img src="/images/tim_underwood_rb2.jpg" class="vertimage43 floatleft">
<img src="/images/joe_smash1v.jpg" class="vertimage43 floatright">
</div>
CSS
.widecolumn .imageholder {
width:51.5em;}
.widecolumn .vertimage43 {
height:32em;
margin:0;
padding:0;
width:24em;}
【讨论】：
当涉及到图像时，实际上不可能使页面分辨率独立。
您可以将 SVG 用于图像，因为矢量图形确实独立于 DPI，但这不适用于照片。
您可以使用高分辨率图像并以较小的尺寸显示它们。这样，放大后，它们看起来好多了。在某些浏览器上，缩小后的图像看起来不会太糟糕。
这是一个示例页面，http://www.cssplay.co.uk/menu/em_images 它具有使用 em 调整大小的高分辨率图像。在具有页面缩放功能的 Opera 上，高分辨率图像在更高的缩放级别保持其清晰度。
【讨论】：
对于视网膜设备，您还可以拥有两倍大小的第二张图像并将@2x 添加到文件名... 因此，如果您有一个名为 image.jpg 的 200px x 300px 图像，您只需放入另一个 400px x 600px 的图像并将其命名为 image@2x.jpg，Retina 设备就会显示它。
【讨论】：