物理像素vs CSS像素vs设备无关像素vs密度无关像素vs PPI [英] Physical Pixels vs CSS Pixels vs Device Independent Pixels vs Density Independent Pixels vs PPI

问题描述

我正在学习Web开发，并且很难确定所有这些等效的内容.

I am learning web development and I am having a hard time determining what is equivalent in all of this.

我知道硬件像素和物理像素是最小的单位，并且密度无关的像素通过设备像素比率映射到实际的硬件像素，并且它们用于使观看体验更加一致.这是否意味着我看到的与设备无关的像素是同一件事?

I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?

此外，我了解到浏览器以CSS像素报告视口宽度，这些和DIP是同一回事吗?

Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?

我知道每英寸的像素是文字，它们是一英寸的像素数，但是它们与DIP有什么关系?完全分开的测量?我什么时候应该使用它呢?

I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement? When should I use that instead?

我希望这是一个适当的问题，我在思考上将所有这些概念链接到一个可用的图中时遇到了问题，并且没有找到其他所有问题都可以立即解决的问题.

I hope this is an appropriate question, I am having issues mentally linking all of these concepts into one usable map, and didn't find any other question where they are all addressed at once.

推荐答案

我知道硬件像素和物理像素是最小的单位，并且密度无关的像素通过设备像素比率映射到实际的硬件像素，并且它们用于使观看体验更加一致.这是否意味着我看到的与设备无关的像素是同一件事?

I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?

此外，我了解到浏览器以CSS像素报告视口宽度，这些和DIP是否相同?

Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?

在两个方面都是.例如，即使硬件配置为以比平常更高或更低的分辨率显示，具有height: 200px; width: 200px的元素在DIP或CSS像素中总是 200 x 200 x 200.如果比例因子为200％，则1x1 DIP或CSS像素以100％映射到1x1物理像素时，它将映射到2x2物理像素正方形.

Yes on both counts. For example, an element with height: 200px; width: 200px is always 200 by 200 in DIPs or CSS pixels, even if the hardware is configured to display at a higher or lower resolution than usual. At a scale factor of 200%, if a 1x1 DIP or CSS pixel maps to a 1x1 physical pixel in 100%, it will map to a 2x2 physical pixel square.

我知道每英寸的像素是文字，它们是一英寸的像素数，但是它们与DIP有什么关系?完全分开的测量?

I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement?

CSS不使用PPI；它仅使用DPI. css-values-3的6.4节列出了以下单位:

CSS does not use PPI; it only uses DPI. Section 6.4 of css-values-3 lists the following units:

dpi
每英寸点数.

dpi
Dots per inch.

dpcm
每厘米点数.

dpcm
Dots per centimeter.

dppx
每像素单位的点数.

dppx
Dots per px unit.

< resolution>单位表示单个点"的大小.通过以cm，px或px表示CSS中可以容纳多少点来进行图形化表示.

The <resolution> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.

出于CSS和媒体查询的目的，单个点"总是对应一个物理像素，而不是DIP或CSS像素，因此是dppx单位.例如，比例因子为200％或设备像素比率(非标准)为2.0等于2 dppx.

For the purposes of CSS and Media Queries, a single "dot" always corresponds to a single physical pixel, never a DIP or CSS pixel, hence the dppx unit. For example, a scale factor of 200% or device pixel ratio (non-standard) of 2.0 is equivalent to 2 dppx.

这篇关于物理像素vs CSS像素vs设备无关像素vs密度无关像素vs PPI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！