为什么当缩放改变时具有相同高度 "look" 的元素不同？

Question

基本上要点在主题中。

当我创建两个具有固定高度 (2px) 的相同 div，并将缩放比例更改为 75% 或 125% 时，由于某种原因它们“看起来”不同，有人可以解释一下这里发生了什么吗？我该如何解决这个问题？

.gradient-slider-line {
    background: linear-gradient(to right, red , blue);
    height: 2px;
}

<div>
<div class="gradient-slider-line"></div>
</div>
<br/>
<div>
<div class="gradient-slider-line"></div>
</div>

结果：

Answer 1

好的，一些研究有所帮助，但不是完整的解决方案。正如最后一条评论所提到的，这是一个子像素渲染问题，它受您的抗锯齿设置和 windows 显示缩放设置的影响。我切换到 0.15 rem 而不是 2px，它产生了一条类似的线，但缩放时线高跳跃的增量 in/out 更小，视觉上不太明显。

Answer 2

这确实是由浏览器对子像素值进行四舍五入造成的，可以在当前 Chrome 和 Firefox 中观察到。要解决此问题，您应该为边框设置样式并且 而不是 高度 - 请参阅：

.line {
  /* 12px leaves _no_ fractions for many zoom factors: */
  margin-top: 12px;
  width: 200px;
  box-sizing: border-box;
}

.group-height .line {
  /* 1px leaves fractions for many zoom factors: */
  height: 1px;
  background-color: black;
}

.group-border .line {
  border-top: 1px solid black;
}

.group-height {
  border-right: 10px solid green;
}

Check visual line apprearances with different browser/OS zoom!<br> Observe that styling with `height` (left side) leads to unexpected rounding effects, whereas `border` (right side) behaves as expected.
<div style="display: flex">
  <div class="group-height">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
  <div class="group-border">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>
</div>

使用 125% OS 缩放会产生以下结果：

为什么当缩放改变时具有相同高度 "look" 的元素不同？

Why do elements with the same height "look" differently when zoom changes?

html

css

height

zooming