html之物理像素 vs CSS 像素 vs 设备独立像素 vs 密度独立像素 vs PPI
我正在学习网络开发,但我很难确定在所有这些方面什么是等价的。
我知道硬件像素和物理像素是最小的单位,与密度无关的像素通过设备像素比映射到实际的硬件像素,它们用于使观看体验更加一致。这是否意味着我看到的与设备无关的像素是同一回事?
此外,我读到浏览器以 CSS 像素报告视口(viewport)宽度,这些和 DIP 是一回事吗?
我知道 Pixels per inch 是字面意思,它们是一英寸的像素数,但它们与 DIP 有什么关系?完全独立的测量?我应该什么时候使用它?
我希望这是一个合适的问题,我在将所有这些概念链接到一个可用的 map 时遇到了问题,并且没有发现任何其他问题可以同时解决所有这些问题。
请您参考如下方法:
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?
Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?
在这两个方面都是肯定的。例如,一个 height: 200px 的元素; width: 200px
始终 200 x 200 的 DIP 或 CSS 像素,即使硬件配置为以比平常更高或更低的分辨率显示。在 200% 的比例因子下,如果 1x1 DIP 或 CSS 像素以 100% 的比例映射到 1x1 物理像素,它将映射到 2x2 物理像素正方形。
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。 Section 6.4 of css-values-3列出以下单位:
dpi
Dots per inch.dpcm
Dots per centimeter.dppx
Dots per px unit.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 和 Media Queries 的目的,单个“点”始终对应于单个物理像素,而不是 DIP 或 CSS 像素,因此是 dppx 单位。例如,200% 的比例因子或 2.0 的设备像素比(非标准)相当于 2 dppx。
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。