vh单位行为不一致

Question

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

height: 0.4vh;

高度不变，只有宽度改变。然而，在某些情况下，不同伪元素的高度会有所不同（这里的两条较深线条的高度都为0.4vh）： 我创建了这个演示，但是意识到这取决于视口高度是否发生奇怪的事情： https://jsfiddle.net/vuw693La/ 我在Chromium和Firefox上遇到了这个问题。我做错了什么还是用vh单位无法完美呈现像素？

- jcuenod

---

自然舍入在某种程度上必须涉及，除非视口高度可以完全按照您使用的值进行划分。这可能会导致“相同”元素在不同位置上呈现不同的渲染效果，因为所有分数的总和不一定加起来等于100％，因此在某个地方必须做出“妥协”。 @jack的答案是我认为最好和最实用的解决方案。 - CBroe

@CBroe，我理解你的观点，谢谢。在这种情况下，我本以为calc(100vh * 0.004)会给我一个一致的高度，但没有这样的运气。 - jcuenod

calc(100vh * 0.004)仅适用于实际的100vh。以任意767像素的视口高度为例，乘以0.004仍然会给出3.068个“像素”的结果。现在，将子像素渲染作为一种通常适当的对策留在一边，如果我们只使用“整”像素，则发生在多个位置的0.068像素分数仍然必须去某个地方。将其舍入到X个位置的3个像素，将使您至少有1个位置的值大多数情况下为4（简化了，但我认为您会明白我的意思）。 - CBroe

@CBroe 我能理解这一点，所以我可以看出使用相对单位不一致地进行四舍五入的原因，只是我认为渲染引擎会在 calc 函数中一致地进行四舍五入。 - jcuenod

我的观点是，在某些情况下它并不一定能够做到。这并不是因为它很“有用”，而是因为这是数学上的必要性。 - CBroe

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

- jack

---

对我来说，当选择器对所有块都相同时存在不精确的情况很奇怪。浏览器肯定只需要计算一次单位（然后在视口更改时重新计算）？ - jcuenod

有时候你会注意到像基于百分比的渐变这样的东西也会出现相同的情况；不确定为什么，但我不是渲染引擎方面的专家。 - jack

如果你想要“像素完美”，就使用像素。（当然，即使这样也不能绝对保证，在缩放、亚像素渲染等方面仍有变数。） - CBroe

Answer 2

一些浏览器在使用视口单位时存在不一致性，特别是小于1vw或1vh的情况。我解决这个问题的方法是分配更大的单位（例如将它们乘以4），然后使用“transform: scale(0.25);”将元素恢复到所需大小。这不是一个直截了当的解决方案，因为您可能需要重新排列代码才能使其正常工作，但我找不到其他解决方法。

- lurkit