css - 不一致的 vh 单元行为

Question

我有一个在悬停时出现的伪元素:

height: 0.4vh;

高度不会改变，只有宽度会改变。然而，出于某种原因，在某些条件下，不同伪元素的高度不同(此处的两条较暗的线都有 height: 0.4vh):

我提出了这个 fiddle 来演示，但意识到这是否会发生这种怪异取决于视口(viewport)高度: https://jsfiddle.net/vuw693La/

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

Answer 1

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

.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; }
}