像素密度，视网膜显示和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，我唯一需要做的就是为每个设备像素比例更改字体大小吗？

- user1614463

---

其实我不太确定，但我今天在 SM 上看到了这篇文章，可能会有用：http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ - Billy Moat

我认为所提出的方法是正确的。这里有一篇关于这个主题的优秀文章：http://alistapart.com/article/a-pixel-identity-crisis - jogo

Answer 1

好的，这是一个相当严重的误解(很酷！:))，下面是一个简短的解释，告诉你需要做什么。

首先，任何近期的iPhone/iPod/iPad或许多Android手机都有高DPI屏幕，所以您可能已经有用于测试的设备。如果没有，而您是专业人士，只需购买一台4G iPod Touch即可。

就99%的东西而言，它是无需进行任何操作的。如果它按照您所建议的方式工作，那么大多数网站将缩小到应有的大小的四分之一，互联网将被破坏。

对于字体、SVG、CSS框阴影、渐变和任何其他CSS绘制的东西，都很好。这些东西看起来非常棒，无需额外的工作。(因此我们一直在推动一切都使用CSS。)

对于位图(即pngs、jpgs、gifs)，您只需要提供两倍于正常分辨率的图像，但大小与正常大小相同。

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

之所以这样做是因为屏幕上的像素不同于CSS像素。这是一件好事，否则，就像我说的那样，事情会变得非常小。

我想回过头来看看，也许将CSS中的px单位称为其他不同的东西，比如一个“点”之类的东西会更好，但是这就是现状。

有时您会看到对设备无关像素的参考，这是CSS px和屏幕上真实像素之间的区别。

- Rich Bradshaw

---

那么，如果我指定了 font-size 为 16px，高/低密度显示的浏览器会自动调整它到适当的大小吗？ - Marco Scannadinari

是的。技术上，具有设备像素比为2的屏幕将以32px的方式绘制它，但由于像素的宽度和高度减半，它将显示为16px，但具有更多的细节。您唯一需要手动执行的操作是包含更高分辨率的图像。 - Rich Bradshaw

传统的做法是1个CSS像素等于1个物理像素。可以说这是标准。更正式地说，有一个参考像素的概念（http://www.w3.org/TR/css3-values/#reference-pixel），但在日常使用中并不真正相关。 - Rich Bradshaw

是的，我知道在100%缩放时，一个CSS像素可能等于一个设备像素，但是您说一个像素比率为2的设备通常会加倍字体大小以进行补偿。但是2的比率与什么相比呢？96dpi？ - Marco Scannadinari

每个CSS像素都使用恰好1个设备像素绘制。 - Rich Bradshaw

Answer 2

视网膜显示屏不会使元素的大小加倍。它只影响网络中的图像。

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

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

- ChazUK

---

这怎么可能呢？如果我告诉浏览器在16像素下渲染字体，那么在所有屏幕上它都应该是16像素吗？唯一的原因是如果苹果公司进行了一些更正以使旧页面仍可浏览。 - user1614463

像素曾经是1=1，但现在有设备像素、图片像素和CSS像素。这是一份关于高分辨率显示器和网页的精彩演示文稿，链接如下：https://dl.dropbox.com/u/75469230/responding-to-the-hi-res-web/index.html#/15 - ChazUK