如何制作一把测量“厘米”的尺子？

Question

据我所知，CSS 单位“CM”仅适用于印刷媒体类型。
如果我想做一把可以精确测量“CM”的尺子怎么办？

我发现在样式表中使用

1cm

在某些情况下可以正确呈现，例如屏幕上有

devicePixelRatio = 1

（在 1920 x 1080 扩展屏幕上），并且

50px

与带有

1cm 的屏幕上的 

devicePixelRatio = 2

 非常接近

（在 Macbook Air M1 视网膜屏幕上）

一个非常粗略的例子如下： https://codesandbox.io/p/sandbox/unit-cm-x7vvsy?file=/src/App.js

我想知道是否有一个可靠的方程可以在屏幕上将精确长度呈现为“cm”？

Answer 1

不幸的是，屏幕通常无法准确地表示这些单位。引用W3C文档

绝对单位之间的关系如下：1in = 2.54cm = 25.4mm = 72pt = 6pc

[示例架构]

所谓的绝对单位（cm、mm、in、pt 和 pc）在 CSS 中的含义与其他地方相同，但前提是您的输出设备具有足够高的分辨率。在激光打印机上，1cm 应该正好是 1 厘米。但在低分辨率设备上，例如计算机屏幕，CSS 不需要这样做。

如果这是一个要求，您可以设计某种校准程序，要求您的用户调整比例参数，直到 10 厘米的标尺能够足够准确地表示。