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 MacBooks上运行的浏览器上的默认字体大小是16px还是更高？因为如果它更高,缩放效果会倍增.

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

Answer 1

好吧,这是一个非常严重的误解(这很酷!:)),所以这里简要说明你可能想做什么.

首先,任何最近的iPhone/iPod/iPad或许多Android手机都有Hi DPI屏幕,所以你可能已经有了一些东西需要测试.如果没有,而且你正在这样做,只需购买4G iPod Touch.

就其工作原理而言,99%的东西,你什么都不做.如果你的建议如何,那么大多数网站的规模应该是他们的四分之一,并且互联网将被打破.

对于字体,SVG,CSS框阴影,渐变和任何其他CSS绘制的东西,它都很好.没有任何额外的工作,这些东西看起来很棒.(因此我们为什么一直在推动CSS中的所有内容.)

对于位图(即pngs,jpgs,gifs),您需要做的就是为图像提供2倍的分辨率,但大小与正常相同.

例如,如果您的页面的图像是100px×100px,那么您将提供200px×200px的图像,但在CSS中指定或在HTML中指定为100px×100px.

这样做的原因是屏幕上的像素与CSS像素不同.这是一件好事,因为正如我所说,事情会很小.

我想在事后看来,将pxCSS中的单元称为不同的东西可能更好,比如一个dot或者什么东西,但是你去了.

您有时会看到对设备无关像素的引用,这是CSS px与屏幕上的实际像素之间的差异.

Answer 2

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

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

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