我的想法哪里错了？浏览器缩放简单 <div> 框

Question

今天做了一个简单的测试

    <html>
    <head>
    <style>
     #box_4cm {
      width: 4cm;
      height: 4cm;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
     #box_223px {
      width: 223.25px;
      height: 223.25px;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
    </style>
    </head>
    <body>
     <div id="box_4cm"></div>
     <div id="box_223px"></div>
    </body>
    </html>

此降价测试两个盒子的尺寸。第一个框的宽度应为 4cm，高度应为 4cm。第二个盒子应该是相同的大小。至于第二个盒子，我量了一下我的屏幕尺寸，是1920x1080px，34.4cm。然后做了一个计算。 1cm = 55.81px -> 4cm = 223.25px.

当我输入这个问题时，我从 SO 代码片段的结果中看到，框的大小不同。此外，第一个盒子是 3.5 厘米，而不是 4 厘米。第二个盒子大约5厘米大小。结果显然是错误的。

将上面的HTML导出为PDF，我得到了第一个盒子的预期结果，它显示为真实的4cm。不仅如此，以像素为单位提供我的尺寸后，我仍然得到错误的实际尺寸。换句话说，如果我做 #box {width:100px; height:100px;} 结果显示大小不同。我用 gimp measure tool.

检查过它

所以我从我开始的地方继续。我的想法哪里错了？

P.S我的系统是LinuxMint，浏览器是Chromium。

以上两个屏幕截图显示 #box_223px {width: 223.25px; ... } 的宽度为 294px。您可以在 gimp 底部面板中看到它。

Answer 1

你不能那样做。 cm、in等长度单位只适合打印。

这是因为浏览器可能知道显示器的像素（通过显卡），但不知道 真实世界 尺寸（屏幕尺寸）

请参阅来自 MDN 的引用：https://developer.mozilla.org/en-US/docs/Web/CSS/length#Absolute_length_units

Absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. This is done by anchoring one of the units to a physical unit, and then defining the others relative to it. The anchor is done differently for low-resolution devices, such as screens, versus high-resolution devices, such as printers.

For low-dpi devices, the unit px represents the physical reference pixel; other units are defined relative to it. Thus, 1in is defined as 96px, which equals 72pt. The consequence of this definition is that on such devices, dimensions described in inches (in), centimeters (cm), or millimeters (mm) doesn't necessary match the size of the physical unit with the same name.

For high-dpi devices, inches (in), centimeters (cm), and millimeters (mm) are the same as their physical counterparts. Therefore, the px unit is defined relative to them (1/96 of 1 inch).

结果：

使用像素单位显示，长度单位将不正确。
使用长度单位进行打印，如果您不介意绝对值，可以使用像素单位。

Answer 2

我认为你转换错了。
1cm = 96px/2.54 = 37.7952755906
4cm = (96px/2.54)*4 = 151.181102362

<html>
    <head>
    <style>
     #box_4cm {
      width: 4cm;
      height: 4cm;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
     #box_151px {
      width: 151.181102362px;
      height: 151.181102362px;
      padding: 0;
      margin: 0;
      border: 1px solid black;
     }
    </style>
    </head>
    <body>
     <div id="box_4cm"></div>
     <div id="box_151px"></div>
    </body>
    </html>

我的想法哪里错了？浏览器缩放简单 <div> 框

Where is my thinking wrong? Browser scales simple <div> box

html

css

measurement

chromium

结果：