物理像素与CSS像素对设备无关像素与密度无关像素对比PPI

我正在学习Web开发,我很难确定所有这些内容的等价物.

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

此外,我读到浏览器以CSS像素报告视口宽度,这些和DIP是一样的吗？

我知道每英寸像素是字面值,它们是一英寸的像素数,但它们与DIP有什么关系？一个完全独立的测量？我什么时候应该使用它呢？

我希望这是一个合适的问题,我在心理上将所有这些概念链接到一个可用的地图中,并且没有找到任何其他问题,它们都会立即被解决.

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

此外,我读到浏览器以CSS像素报告视口宽度,这些和DIP是一样的吗？

两个都是的.例如,与元素height: 200px; width: 200px是总是 200通过200以DIP或CSS像素,即使硬件被配置在比通常更高或更低的分辨率来显示.在比例因子为200%时,如果1x1 DIP或CSS像素在100%中映射到1x1物理像素,则它将映射到2x2物理像素方块.

我知道每英寸像素是字面值,它们是一英寸的像素数,但它们与DIP有什么关系？一个完全独立的测量？

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

dpi
每英寸点数.

dpcm
每厘米点.

dppx
每px单位的点数.

单位表示图形表示中单个"点"的大小,通过指示这些点中有多少适合CSS in,cm或px.

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