css - 什么是 CSS 中的像素 (px)(在视网膜显示时代)？

Question

在视网膜显示时代，CSS 中的像素是什么？

关于px的问题过去已经回答过了。答案似乎有点过时，并且没有解决今天的屏幕问题。或者他们现在已经得到了回答，但在更复杂的背景下。

那么 2019 年的简单问题是:CSS 中的 px 是什么？

Answer 1

视网膜显示时代 CSS 中的像素是什么？

来自 CSS Techniques For Retina Displays :

CSS pixel is an abstract unit used by the browsers to draw images and other content on a web page. CSS pixels are DIPs which means they are device independent pixels. They readjust themselves according to the pixel density of the screen they are rendered in.

If we have the following piece of code:

<div style=”width:150px; height:200px”></div>

The HTML component above would look 150px by 200px in size in a standard display while 300px by 400px in a Retina display to retain the same physical size.

CSS 中的 px 是什么？

根据 Understanding pixels and other CSS units ，在高分辨率设备上，一个 CSS px 是 1/96 英寸。

The CSS pixel is a ‘reference’ pixel, not a device pixel. This is misleading and, personally, I prefer the notion of ‘user unit’ that SVG uses because I think it is easier to then explain the mapping to physical units and device pixels. But once one understands that a ‘px’ is actually a reference, not a device pixel, things make more sense. The thing to remember is that a CSS px is an abstract unit and there is a ratio controlling how it a) maps to actual device pixels and b) maps to physical units (in a fixed way, the ratio is always 96 CSS px to an inch).

A CSS inch is exactly or ‘close’ to an inch. On high resolution devices, and if no other parameters interfere (like user zoom or CSS transforms), an inch will be a physical inch as expected. On low resolution devices, there will be a margin of error, as explained above.

Scalability and adaptability is what matters most. The most important aspect for most developers is that content layout can reflow and adapt as units scale in a predictable and reasonable way. While the concept of keeping the exact aspect ratio on all devices might seem appealing, it has consequences that are not desirable on low resolution devices (such as unwanted antialiasing causing blurry rendering).