CSS边框:1px显示为0.667px或1px,具体取决于计算机/显示器分辨率(?)

css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)(CSS边框:1px显示为0.667px或1px,具体取决于计算机/显示器分辨率(?))

本文介绍了CSS边框:1px显示为0.667px或1px,具体取决于计算机/显示器分辨率(?)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这太奇怪了。我正在测试同一个Web应用程序(Chrome嵌入到Electron中),我在两台计算机上有两个一模一样的副本,都是Windows10,一台是1080p显示器,另一台是4K显示器(这应该是无关紧要的,我猜是编辑:现在我开始认为这就是问题所在)。

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

问题是,在一个圆形或正方形中使用border: 1px solid #000,在一台计算机中计算为1px,在另一台计算机中计算为0.667px

究竟为什么会发生这种情况?

编辑:我可以看到,我尝试的任何边框都会发生这种情况。我可以看到,如果我放入2px,那么它的计算结果是2px,但在4K计算机中,1px中的任何值都计算为0.667px

EDIT2:与em相同,0.2em计算为2px,0.1的计算为0.667px。从0.1320.133em计算的像素从0.667跳到1.333,不可能得到1px(!!)

->线条未对齐,因为带边框的正方形不会增加2px,而是增加0.667x2(计算机1)

->线条对齐,因为边框计算为2px(计算机2)

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

推荐答案

我正在努力查找有关此问题的任何明确信息,但我对发生此情况的原因相当有信心。

4K屏幕具有如此高的像素密度,以至于Chromium会将页面上的元素放大,以便它们在4K屏幕上看起来不会很小。在本例中,它似乎使用了比例因子1.5。从您的屏幕截图可以清楚地看出这一点:文本和方框在4K屏幕上都显示为大约1.5倍的大小。

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

铬透明地缩放高DPI,因此在Web检查器中您仍然可以看到原始的CSS值。因此,尽管您的10pxfont-size现在实际上呈现为15px,但它在检查器中仍然显示为10px。为显示边框未放大,1px除以1.5,得出0.667px

这种行为在我看来是明智的,但作为一个副作用,它会扰乱你的定位。以下是几种可能的解决方法:

  1. 向所有框添加1px边框,使边框的颜色与不需要黑色边框的框相同。这将确保它们都排好队。
  2. 使用box-sizing: border-box,以便指定的框的宽度和高度包括边框。默认值(content-box)将边框添加到指定框大小之外,这就是您当前遇到对齐问题的原因。

这篇关于CSS边框:1px显示为0.667px或1px,具体取决于计算机/显示器分辨率(?)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:CSS边框:1px显示为0.667px或1px,具体取决于计算机/显示器分辨率(?)

基础教程推荐