CSS中的像素密度，视网膜显示和字体大小 [英] Pixel density, retina display and font-size in CSS

问题描述

我没有自己的Retina MacBook来测试这些东西，在高像素密度显示器上的网络设计上似乎有很多混乱。

I don't have a Retina MacBook myself to test these things out, and there seems to be a lot of confusion on the internet about web design on high pixel density displays.

现在，我假设在具有Retina显示屏的MacBook上的WebKit将页面缩放大约两倍的大小，因为大多数网页不是为适应更高的像素密度而构建的。

Now, I assume that WebKit on a MacBook with Retina display scales the page about twice it's size as most web pages are not built to adapt to the higher pixel density?

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

In my view the ideal case when designing for these, or actually any type of display is to use ems instead of pixels as you could just do;

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

and the whole page would scale accordingly. Or would it? Is the default font-size on browsers running on Retina MacBooks still 16px or is it higher? Because if it's higher, the scaling effect would multiply.

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

I guess my question is; if I use ems consistently, the only thing I should need to do is to change the font-size for every device-pixel-ratio?

推荐答案

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

OK, this is a pretty serious misunderstanding (which is cool! :) ), so here's a brief explanation of what you might want to do.

，任何最近的iPhone / iPod / iPad或许多Android手机有Hi DPI屏幕，所以你可能已经有一些东西来测试。如果没有，而你正在做这个专业，只是买一个4G iPod Touch。

Firstly, any recent iPhone/iPod/iPad or many Android phones have Hi DPI screens, so you might already have something to test with. If not, and you are doing this professionally, just buy a 4G iPod Touch.

在它的工作原理，99％的东西，你不需要什么。

In terms of how it works, for 99% of stuff, you need do nothing. If it worked how you suggested, then most websites would be a quarter of the size they should be, and the internet would be broken.

对于字体，SVG，CSS盒子，如果你的建议是工作的，那么大多数网站将是他们应该的大小的四分之一，阴影，渐变和任何其他CSS绘制的东西，这一切都很好。这些东西看起来真棒，没有任何额外的工作。 （因此，为什么我们一直在推动CSS中的一切。）

For fonts, SVG, CSS box shadows, gradients and any other CSS drawn stuff, it's all good. Those things look awesome without any extra work. (Hence why we've been pushing towards everything in CSS for a while.)

对于位图（即pngs，jpgs，gifs），你所需要做的就是提供

For bitmaps (i.e. pngs, jpgs, gifs), all you need to do is provide the image with 2x the resolution, but size it the same as normal.

例如，如果您的网页有一个100像素×100像素的图片，您可以提供一个200像素×200像素的图片，但在CSS中指定为或者在HTML中指定为100像素×100像素的属性。

As an example, if your page had an image that was 100px by 100px, you'd provide an image that was 200px by 200px, but specify in CSS or as an attribute in HTML that it is 100px by 100px.

这是因为屏幕不同于CSS像素。这是一件好事，因为否则就像我说的，事情会很小。

The reason this works is that a pixel on the screen is not the same as a CSS pixel. This is a good thing, because otherwise as I say, things would be tiny.

我猜想，事后看来，最好调用 px 单位在CSS不同，如点或某事，但你去。

I guess that in hindsight, it might have been better to call the px unit in CSS something different, like a dot or something, but there you go.

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

You'll sometimes see references to device independent pixels, which is the difference between the CSS px, and the real pixel on the screen.

这篇关于CSS中的像素密度，视网膜显示和字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！