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，对于第一个框，我得到了预期的结果，它显示为真实4厘米。更重要的是，以像素为单位提供尺寸时，我仍然得到错误的实际尺寸。换句话说，如果我这样做，#box {width:100px; height:100px;}的结果将显示不同的大小。我已经用gimp measure tool进行了检查。

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

P.S我的系统是Linux Mint，浏览器是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

绝对长度单位表示已知输出介质的物理属性时的物理测量值，例如用于打印版式。这是通过将一个单元固定到一个物理单元，然后相对于它定义另一个单元来完成的。对于低分辨率设备（例如屏幕）和高分辨率设备（例如打印机），锚点的处理方式有所不同。

对于低dpi的设备，单位px代表物理参考像素；相对于它定义了其他单位。因此，1in被定义为96px，它等于72pt。此定义的结果是，在此类设备上，以英寸（in），厘米（cm）或毫米（mm）表示的尺寸不必与具有相同名称的物理单位。

对于高dpi的设备，英寸（in），厘米（cm）和毫米（mm）与其物理对应物相同。因此，相对于它们定义了px单位（1英寸的1/96）。

结果：

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

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>框

2 个答案:

结果：