CSS 中的像素密度、视网膜显示和字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12058574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pixel density, retina display and font-size in CSS
提问by Triplr
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 来测试这些东西，而且互联网上似乎有很多关于高像素密度显示器上的网页设计的困惑。
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?
现在，我假设带有 Retina 显示屏的 MacBook 上的 WebKit 将页面缩放到其大小的两倍左右，因为大多数网页不是为适应更高的像素密度而构建的？
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;
在我看来，为这些设计时的理想情况，或者实际上任何类型的显示器都是使用 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%; }
}
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.
整个页面会相应地缩放。或者会吗？在 Retina MacBooks 上运行的浏览器的默认字体大小仍然是 16px 还是更高？因为如果它更高，则缩放效果会成倍增加。
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?
我想我的问题是；如果我一直使用 ems，我唯一需要做的就是更改每个设备像素比的字体大小？
回答by Rich Bradshaw
OK, this is a pretty serious misunderstanding (which is cool! :) ), so here's a brief explanation of what you might want to do.
好的，这是一个非常严重的误解（这很酷！:)），所以这里简要说明您可能想要做什么。
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.
首先，任何最近的 iPhone/iPod/iPad 或许多 Android 手机都有 Hi DPI 屏幕，所以你可能已经有了一些可以测试的东西。如果没有，而且您是专业人士，只需购买 4G iPod Touch。
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.
就它的工作原理而言，对于 99% 的事情，你什么都不用做。如果它按照您的建议工作，那么大多数网站的大小将是它们应有的四分之一，并且互联网将被破坏。
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.)
对于字体、SVG、CSS 框阴影、渐变和任何其他 CSS 绘制的东西，这一切都很好。这些东西看起来棒极了，无需任何额外的工作。（这就是为什么我们一直在推动 CSS 中的一切。）
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.
对于位图（即 png、jpg、gif），您需要做的就是提供 2 倍分辨率的图像，但将其大小设置为与正常相同。
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.
例如，如果您的页面有一个 100 像素 x 100 像素的图像，您将提供一个 200 像素 x 200 像素的图像，但在 CSS 或 HTML 中指定它是 100 像素 x 100 像素的属性。
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.
这样做的原因是屏幕上的像素与 CSS 像素不同。这是一件好事，因为否则就像我说的那样，事情会变得很小。
I guess that in hindsight, it might have been better to call the pxunit in CSS something different, like a dotor something, but there you go.
我想，事后看来，px在 CSS中将单元称为不同的东西可能会更好，比如 adot或其他东西，但你去了。
You'll sometimes see references to device independent pixels, which is the difference between the CSS px, and the real pixel on the screen.
您有时会看到对设备无关像素的引用，这是 CSSpx和屏幕上真实像素之间的差异。
回答by ChazUK
The Retina display doesn't double the size of the element. It only effects images on the web.
Retina 显示屏不会将元素的大小加倍。它只影响网络上的图像。
For each "web pixel" in an image it requires 4 (I think) "screen pixels" so images are stretched to fill these extra pixel spaces, making them look less crisp on a retina display. Images should be exported at a higher DPI and served to Retina displays via media queries or Javascript.
对于图像中的每个“网络像素”，它需要 4 个（我认为）“屏幕像素”，因此图像被拉伸以填充这些额外的像素空间，使它们在视网膜显示器上看起来不那么清晰。图像应该以更高的 DPI 导出，并通过媒体查询或 Javascript 提供给 Retina 显示器。
Text, CSS effects, Canvas, SVG Vectors etc are not directly effected by the retina display.
文本、CSS 效果、画布、SVG 矢量等不受视网膜显示的直接影响。
