我需要能够使用任何显示设备的实际长度单位，并且必须能够依赖它们。所以我给自己做了一把小尺子。在我的笔记本电脑屏幕上，它显得太小了。在我的手机上甚至更小。
如何校准？我想显示设备应该有它的物理尺寸，然后分辨率决定像素的距离。我该怎么做？
div {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
div.ruler {
counter-reset: major -1;
width: 10cm;
white-space: nowrap;
font-size: 0;
}
div.number::after {
content: counter(major);
counter-increment: major;
font-size: 3mm;
}
div.major {
width: calc(1cm - 1px);
height: 5mm;
text-align: left;
border-left: 1px solid black;
display: inline-block;
font-size: 0;
}
div.minor {
width: calc(1mm - 1px);
height: 1mm;
border-right: 1px solid black;
display: inline-block;
}
div.half {
height: 2mm;
}<html>
<head>
<title>Screen Geometry and Gestures</title>
</head>
<body>
<main>
<h1>Screen Geometry and Gestures</h1>
<section>
<h2>Length Units</h2>
<p>Let's make a ruler!</p>
<div class="ruler">
<div class="major">
<div class="number"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor half"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor"></div>
<div class="minor"></div>
</div>
<script type="text/javascript">
const self = document.currentScript;
const div = self.previousElementSibling;
for(let i = 0; i < 20; i++) {
const newdiv = div.cloneNode(true);
self.parentElement.insertBefore(newdiv, self);
}
</script>
<div class="major"></div>
</div>
</section>
</main>
</body>
</html>CSS"真实世界"；单位基于一英寸的像素大小，在任何设备上，一英寸总是96像素。因此"；1cm"；总是意味着37.8个像素，而这并不取决于像素的实际大小。此外；像素"；在现代显示器上不一定是显示器硬件上的一个实际像素。就浏览器软件而言，大多数手机使用一个以上的物理像素来实现单个像素；换句话说，您的屏幕大小可能报告为420x1080像素，但可能有更多的物理像素。
想想看：我可能有两个显示器，每个都是1920x1080像素。一个可能有墙那么大，一个可能舒适地放在桌子上。插入显示器的计算机不可能知道"；1in"；每个都应该是这样。(好吧，这不是不可能的；监视器通信像素尺寸的协议也可以——据我所知，实际上也可以——报告物理尺寸，但在浏览器窗口的环境中，代码只能看到像素尺寸。(
特别是对于手机和平板电脑中的高分辨率屏幕，认为的工作方式是，无论屏幕有多大或物理像素有多小，10个像素这样的长度，也就是在左右两侧填充一段文本的好长度，相对于屏幕的大小，都应该看起来很好。设备制造商应该确保它以这种方式工作。这并不总是可行的(你好，iPad Mini(，但与之斗争正在向风车倾斜。
CSS具有绝对长度单位
例如：CSS支持英寸作为测量单位，写为in，例如：
.foot { width: 12in; }
正如Pointy很好地解释的那样，问题是像素在现实世界中不是一个绝对的长度单位，因为不同的设备具有不同的像素密度。(顺便说一句：可变像素密度是一件好事，而不是一件必须"固定"的坏事。(
这并不意味着你不能在所有设备上定义一个具有相同真实世界维度的布局。这只是意味着您不能混合和匹配单元类型。
这可能意味着你必须避免使用长度单位，如像素、em、rem、vw、vh等。你可能需要坚持木匠能识别的长度单位：毫米、厘米和英寸。
对于视觉上复杂的东西，比如长度标尺(又称"标尺"(，将其创建为SVG，然后一次性设置整体尺寸会容易得多。语义HTML不太可能有任何方法做到这一点，而且在任何情况下，这都是一种困难的方法。
svg.ruler {
width: 12in;
height: 1in;
}