vh 单元行为不一致

Question

我有一个伪元素，悬停时出现：

height: 0.4vh;

高度不会改变，只有宽度会改变。然而，由于某种原因，在某些条件下，不同伪元素的高度不同（这里的两条深色线都有height: 0.4vh）：

我举起这个小提琴来演示，但意识到这种奇怪现象是否发生取决于视口高度： https: //jsfiddle.net/vuw693La/

我在 Chromium 和 Firefox 上遇到这个问题。我是否做错了什么，或者没有办法使vh单位达到“像素完美”？

Answer 1

浏览器渲染存在一些不精确性，尤其是当百分比或视口单位发挥作用时。在这种情况下，我会考虑将这些线的高度与视口联系起来是否真的值得。对于大多数屏幕尺寸来说，它似乎仅限于几个像素的差异；也许可以为其设置一个大小，或者在几个断点处设置静态大小以逐渐放大它。

.icon_piece::after { height: 1px; }

// tweak breakpoints to whatever works best for your design
@media (min-height: 600px) { 
  icon_piece::after { height: 2px; } 
}

@media (min-height: 900px) {
  icon_piece::after { height: 3px; }
}