我在互联网上读到过我不应该用绝对像素高度/宽度/大小定义字体(或任何东西)，而是使用 EM ...以便在更高分辨率的显示器上，我的网站可以适当扩展。
但是，我用什么来定义图像的高度/宽度...因为图像不能很好地缩放(它们看起来像素化)
更新:
澄清一下，我不是指的是页面缩放。我指的是如何使我的 Web 应用程序分辨率独立，以便它在更高 DPI 显示器上看起来正确。
最佳答案
我知道这个问题有点老了，但我想把它放在那里供以后出现的任何人使用。当谈论具有更高像素密度的移动设备时，移动浏览器会将页面放大一定量，使其看起来好像网页不是很小。设备根据 CSS 2.1 specification 实现此缩放.
例如，与桌面显示器相比，当今许多设备的像素密度比为 1.5 倍。因此，移动浏览器会将网站缩放约 150% 以补偿额外的像素。新的 Retina 显示屏具有 2 倍的像素密度比……因此浏览器可以将网站放大约 200%。
要点 - 开发人员不必担心不同分辨率的设备。如果您希望图像在高分辨率设备上清晰显示，则需要更高分辨率的图像。您通常不必担心 1.5 倍的设备，因为质量差异可以忽略不计并且不值得付出努力。然而，新的 Retina 显示屏会导致一些非常模糊的图像，因此您应该使用 2 倍的图像。
因此对于下图，您需要导出 600x400 像素的图像，以便图像在新的 Retina 显示屏上清晰显示:
<img src="photo.jpg" style="width:300px; height:200px" />
关于HTML/CSS : What should I use to define image height/width to make it resolution independent?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2695708/