CSS（在视网膜显示期间）的像素（px）是多少？

Question

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

有关px的问题已在过去得到解答。答案似乎有些过时了，无法解决今天的问题。或者他们已经在目前的答案中被提出，但是在更复杂的环境中。

那么对于2019年来说，一个简单的问题是：CSS中的px是什么？

Answer 1

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

来自CSS Techniques For Retina Displays：

  

CSS像素是浏览器用来在网页上绘制图像和其他内容的抽象单位。 CSS像素是DIP，这意味着它们是与设备无关的像素。他们根据渲染屏幕的像素密度重新调整自己。

     

如果我们有以下代码：

     

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

     

上面的HTML组件在标准显示中的尺寸为150px x 200px，而在Retina显示器中的尺寸为300px x 400px，以保持相同的物理尺寸。

     

CSS中的px是什么？

在高分辨率设备上，每Understanding pixels and other CSS units的CSS px为1/96英寸。

  

CSS像素是“参考”像素，而不是设备像素。这具有误导性，而且我个人更喜欢SVG使用的“用户单位”概念，因为我认为这样更容易然后说明到物理单位和设备像素的映射。但是，一旦人们了解到“ px”实际上是参考，而不是设备像素，事情就会变得更加有意义。要记住的是，CSS px是一个抽象单位，并且有一个比率来控制a）映射到实际设备像素和b）映射到物理单位的方式（以固定的方式，比率始终是96 CSS px英寸）。

     

CSS英寸精确或接近于英寸。在高分辨率设备上，如果没有其他参数干扰（例如用户缩放或CSS转换），则英寸将为物理英寸。如预期的那样。如上所述，在低分辨率设备上会存在一定的误差。

     

可伸缩性和适应性是最重要的。对于大多数开发人员而言，最重要的方面是内容布局可以按可预测且合理的方式按单元规模进行回流和适应。虽然在所有设备上保持精确的宽高比的概念似乎很吸引人，但它带来的后果在低分辨率设备上是不希望的（例如，不必要的抗锯齿会导致渲染模糊）。

Answer 2

阅读此https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/

这篇文章很好地涵盖了这个问题，尤其是这句话：

  

如果我将网页设计为320像素宽（以前是iPhone 3的全宽），那么现在它仅是iPhone 4屏幕宽度的一半吗？那不是很好，因为内容太小了一半！幸运的是，情况并非如此，因为编码为HTML / CSS的320像素不再与所有显示都具有一对一的关系：

     

在1x显示器上：HTML / CSS中的1像素宽度=屏幕上的1像素宽度   2x显示屏：HTML / CSS中1像素宽度=屏幕上2像素宽度   浏览器知道显示的分辨率，并转换HTML / CSS   像素变成硬件像素。