CSS 中的像素密度、视网膜显示和字体大小

Question

我自己没有 Retina MacBook 来测试这些东西，而且互联网上似乎有很多关于高像素密度显示器上的网页设计的困惑。

现在，我假设配备 Retina 显示屏的 MacBook 上的 WebKit 会将页面缩放到原来的两倍左右，因为大多数网页并不是为适应更高的像素密度而构建的？

在我看来，在设计这些或实际上任何类型的显示器时，理想的情况是使用 ems 而不是像素，就像你可以做的那样；

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body { font-size: 150%; }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
    body { font-size: 200%; }
}

整个页面会相应地缩放。还是会？在 Retina MacBook 上运行的浏览器的默认字体大小仍然是 16 像素还是更高？因为如果它更高，缩放效果会成倍增加。

我想我的问题是；如果我一直使用 ems，我唯一需要做的就是更改每个设备像素比的字体大小？

Answer 1

好的，这是一个非常严重的误解（这很酷！:)），所以这里简要解释一下您可能想要做什么。

首先，任何最近的 iPhone/iPod/iPad 或许多 Android 手机都有 Hi DPI 屏幕，因此您可能已经有一些东西可以测试。如果没有，而且您这样做很专业，那就买个 4G iPod Touch。

就其工作原理而言，对于 99% 的东西，您无需执行任何操作。如果它按照您的建议工作，那么大多数网站的大小将只有应有的四分之一，并且互联网将被破坏。

对于字体、SVG、CSS 框阴影、渐变和任何其他 CSS 绘制的东西，一切都很好。没有任何额外的工作，这些东西看起来很棒。 （这就是为什么我们一直在推动 CSS 中的一切。）

对于位图（即 png、jpg、gif），您需要做的只是为图像提供 2 倍分辨率，但大小与正常大小相同。

例如，如果您的页面有一个 100 像素 x 100 像素的图像，您将提供一个 200 像素 x 200 像素的图像，但在 CSS 中或作为 HTML 中的属性指定它是 100 像素 x 100 像素。

这样做的原因是屏幕上的像素与 CSS 像素不同。这是一件好事，否则就像我说的那样，事情会变得很小。

我想事后看来，在 CSS 中将 px 单元称为不同的名称可能会更好，例如 dot 或其他名称，但你去吧。

您有时会看到对设备独立像素的引用，这是 CSS px 与屏幕上实际像素之间的区别。

Answer 2

Retina 显示屏不会将元素的大小加倍。它只影响网络上的图像。

对于图像中的每个“网络像素”，它需要 4 个（我认为）“屏幕像素”，因此图像会被拉伸以填充这些额外的像素空间，从而使它们在视网膜显示器上看起来不那么清晰.图像应该以更高的 DPI 导出，并通过媒体查询或 Javascript 提供给 Retina 显示器。

文本、CSS 效果、画布、SVG 矢量等不受视网膜显示的直接影响。