Question

发生了一些奇怪的事情。

当我设置

border-bottom: 0.5px;

和

border-bottom: 1px;

我可以看到计算机的不同之处。但是当我在像codepen这样的在线编辑器中使用相同的系统时，我看不出任何差异。

这是一个小片段供你们看到：

.teste {
display: inline-block;
width: 10vw;
height: 10px;
}

.teste1 {

border-bottom: 0.1px solid black;

}

.teste2 {

border-bottom: 0.4px solid black;

}

.teste3 {

border-bottom: 0.5px solid black;

}

.teste4 {

border-bottom: 1px solid black;

}

.teste5 {

border-bottom: 1.5px solid black;

}

.teste6 {

border-bottom: 2px solid black;

}

<div class="teste teste1"> </div>
<div class="teste teste2"> </div>
<div class="teste teste3"> </div>
<div class="teste teste4"> </div>
<div class="teste teste5"> </div>
<div class="teste teste6"> </div>

本片段中唯一可见的不同之处是1px和1.5px。

所以，这是我的问题：

DOM如何处理这些措施？它是否看到0.1px和0.5px之间的差异？

如果我能看到屏幕上的差异，我的访问者也能看到它吗？

Answer 1

如果要考虑与浏览器无关的网站设计，您应该假设小数px值四舍五入为最接近的整数。

HTML DOM API报告的元素维度始终位于＆＃34; DOM像素＆＃34; - 数字四舍五入到最接近的整数。元素之间的距离总是以＆＃34; DOM像素的整数来表示＆＃34;。

因此1.25px之类的东西在网页设计中没有多大意义。

＆＃34; DOM像素＆＃34;是逻辑长度单位，松散地等于1/96英寸。与110 PPI显示器一样，1px等于1个物理像素。但是在192 PPI显示器上，一个1px映射到2个物理像素。

现代DOM和CSS无法解决物理像素单元问题。

AFAIR试图引入＆＃34;发际线＆＃34;单位，但我认为他们不会通过。

Answer 2

一些Browers将用户代理样式添加到有时会产生轻微变化的元素。我使用chrome似乎可以很好地渲染边框。

尝试近距离放大，您会看到差异

边界px如何工作？

2 个答案: