不一致的 vh 单元行为答案

【问题标题】：Inconsistent vh unit behaviour不一致的 vh 单元行为
【发布时间】：2016-10-29 19:18:15
【问题描述】：

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

height: 0.4vh;

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

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

我在 Chromium 和 Firefox 上遇到了这个问题。是我做错了什么，还是无法使用vh 单位实现“像素完美”？

【问题讨论】：

自然舍入将以一种或另一种方式涉及，除非视口高度可以相应地完美划分为您使用的值。这也可能导致在不同地方对“相同”元素的不同渲染，因为所有分数的总和不一定等于 100%，所以在一个地方或另一个地方“有些东西必须给出”。 @jack 的回答是最好和最实用的解决方案恕我直言。
@CBroe 我明白你关于四舍五入的观点，谢谢。我会认为calc(100vh * 0.004) 在这种情况下会给我一个稳定的身高，但没有这样的运气。
calc(100vh * 0.004) 仍然只能与100vh 实际上 的内容一起使用。取一个任意 767 像素的视口高度，然后乘以 0.004 仍然会给您 3.068“像素”的结果。现在，将亚像素渲染作为大多数时候适度足够的对策放在一边，如果我们只使用“整个”像素，那么出现在多个位置的像素的 0.068 部分仍然必须去某个地方。在 X 位置将其四舍五入到 3 像素，至少会留下 1 个位置而不是大多数时间必须是 4 个位置（很简单，但我想你会明白我的意思。）
@CBroe 我明白了，所以我明白为什么与相对单位不一致的舍入是有用的，我只是认为渲染引擎会使用 calc 函数一致地舍入。
我的意思是，在某些情况下它不一定能做到这一点。这不是因为它“有用”，而是因为它是数学上的必要性。

标签： css viewport-units

【解决方案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; }
}

【讨论】：

我很奇怪，当所有块的选择器都相同时应该存在不精确性。当然浏览器应该只计算一次单位（然后在视口发生变化时重新计算）？
有时你会注意到同样的事情，比如基于百分比的渐变；不知道具体原因，但我不是渲染引擎方面的专家。
好吧，如果你想要“像素完美”，请使用像素。（当然，即使这也不是绝对的保证，缩放、亚像素渲染等）

【解决方案2】：

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

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

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

【讨论】：