不一致的 vh 单元行为

Question

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

height: 0.4vh;

高度不变，只有宽度变了。然而，出于某种原因，在某些情况下，不同伪元素的高度不同（这里的两条较暗的线都有 height: 0.4vh）：

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

我在 Chromium 和 Firefox 上遇到了这个问题。我是做错了什么还是没有办法 "pixel perfect" 与 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; }
}

Answer 2

某些浏览器在使用视口单位时存在不一致，特别是小于 1vw 或 1vh。

我解决这个问题的方法是分配更大的单位（例如将它们乘以 4），然后使用 transform: scale(0.25); 将元素恢复到所需的大小。

这不是一个简单的解决方案，因为您可能必须重新安排代码才能使其正常工作，但我找不到任何其他解决方法。

不一致的 vh 单元行为

Inconsistent vh unit behaviour

css

viewport-units