css边框：1px显示为0.667px或1px，具体取决于计算机/显示器分辨率（？）

Question

这很奇怪。我正在测试相同的Web应用程序（嵌入Electron的Chrome），我在2台计算机上有两个精确的副本，两个都是10个，一个是1080p显示器，另一个是4K显示器（这应该是无关紧要的，我想这是编辑：现在我开始认为这是问题所在。）

但是，当我在两个站点中运行应用程序时，除了不使用border参数外，我看到了无法解释的差异，我不知道如何修复。

问题在于，通过在圆形或方形中使用border: 1px solid #000，在一台计算机中，它计算为 1px ，在另一台计算机中计算为 0.667px 。

为什么会发生这种情况？

编辑：我可以看到这种情况发生在我尝试的任何边界上。我可以看到，如果我放2px，那么它计算为2px，但1px中的任何东西在4K计算机中计算为0.667px

EDIT2 ：与em相同，em 0.2计算为2px，0.1计算为0.667px。从0.132和0.133 em，它从0.667跳到1.333 px计算，不可能获得1px（!!）

左 - ＆gt;这些线没有对齐，因为带边框的正方形不添加2px但是0.667x2（计算机1）

正确 - ＆gt;因为边界计算为2px（计算机2）

，所以这些线是对齐的

以下您可以看到Chrome开发的控制台信息

Answer 1

我很难找到关于此的任何确切信息，但我对此为何发生了相当的信心。

4K屏幕具有如此高的像素密度，Chromium正在缩放页面上的元素，使它们在4K屏幕上看起来不那么小。在这种情况下，它似乎使用比例因子1.5 。从截图中可以清楚地看到：4K屏幕上的文本和方框都显示大约1.5倍。

那为什么1px边框也不能扩展到1.5px呢？因为它看起来不会很脆。似乎有一个假设，当你指定1px边框时，你真正想要的是屏幕支持的最小边框，所以你仍然可以在4K屏幕上获得1px，因此它看起来仍然很清晰。

Chromium透明地对高DPI进行缩放，因此在Web检查器中您仍然可以看到原始CSS值。因此，尽管您的10px font-size现在实际上呈现为15px，但它仍然在检查器中显示为10px。为了向您显示边框没有按比例放大， 1px除以1.5，得到0.667px 。

这种行为让我感觉很明智，但作为一种副作用，它会弄乱你的定位。以下是一些可能的解决方法：

1. 为所有方框添加1px边框，使边框颜色与不需要黑色边框的方框相同。这将确保他们排队。
2. 使用box-sizing: border-box，以便指定框的宽度和高度包含边框。默认值（content-box）会在指定的框大小之外添加边框，这就是您当前遇到对齐问题的原因。

Answer 2

为什么不使用@media屏幕并适应您的需要？

@media screen and (min-width: 2160px) {border:？