24

我自己没有 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，我唯一需要做的就是更改每个设备像素比的字体大小？

4

2 回答 2

51

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

首先，任何最近的 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 像素不同。这是一件好事，因为否则正如我所说，事情会很小。

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

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

于 2012-08-21T19:11:11.717 回答
4

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

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

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

于 2012-08-21T17:52:26.047 回答