物理像素和CSS像素之间的转换 [英] Converting between physical pixels and CSS pixels

问题描述

来自 elementFromPoint 的Mozilla文档说明，坐标不是物理像素，但是CSS像素。什么是CSS像素？我的印象是CSS中的像素与物理像素相同。

Mozilla's documentation from elementFromPoint explains that the coordinates are not in physical pixels, but "CSS pixels". Exactly what are CSS pixels? I was under the impression that a pixel in CSS was the same as the physical pixel.

如果不是这样，如何在物理和CSS像素之间进行转换？

If this is not the case, how does one convert between physical and CSS pixels?

推荐答案

像素是一个物理屏幕像素，只要任何网页可以合理地关注自己。

A pixel is a physical screen pixel as far as any web page can reasonably concern itself.

CSS像素作为在CSS 2中定义

The wording ‘CSS pixel’ refers to a pixel as defined in CSS 2

最接近参考像素的设备像素的总数。建议参考像素是设备上一个像素的视角，像素密度为96dpi，距阅读器的手臂长度的距离。对于28英寸的标称手臂长度，视角因此为约0.0213度。

the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.

这是说CSS像素是一个设备像素为正常，简单的屏幕情况。然而，对于操作系统将其正常尺寸增大2倍的专业超高分辨率屏幕，CSS像素可能是两个设备像素宽。

What this is saying is that a CSS pixel is a device pixel for the normal, simple screen cases. However, for specialist super-high-res screens where the OS scales up its normal dimensions by two, a CSS pixel may be two device pixels wide.

我们现在也有在大多数浏览器中的缩放功能，这将自然改变CSS像素（连同所有其他单位）的大小，因此它不匹配设备像素。

We now also have a ‘zoom’ feature in most browsers, which will naturally change the size of the CSS pixel (along with all other units) so it doesn't match a device pixel.

这篇关于物理像素和CSS像素之间的转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！