VH单元行为不一致 [英] Inconsistent vh unit behaviour

问题描述

我有一个伪元素出现在鼠标悬停上:

I have a pseudo element that appears on hover with:

height: 0.4vh;

高度不变，只有宽度不变.但是，由于某些原因，在某些情况下，不同伪元素的高度会有所不同(此处两条较暗的线都具有height: 0.4vh):

The height doesn't change, only the width does. For some reason, however, under certain conditions the heights of different pseudo elements differ (both of the darker lines here have height: 0.4vh):

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

I put up this fiddle to demonstrate, but realise that it depends on the viewport height whether this weirdness happens: https://jsfiddle.net/vuw693La/

我在Chromium和Firefox上遇到此问题.我是在做错什么，还是没有办法用vh单位实现像素完美"?

I am having this issue on Chromium and Firefox. Am I doing something wrong or is there no way to be "pixel perfect" with vh units?

推荐答案

浏览器渲染中存在一些不精确之处，尤其是当百分比或视口单位起作用时.在这种情况下，我将考虑将那些线的高度绑定到视口是否真正值得.对于大多数屏幕尺寸而言，似乎仅限于几个像素的差异之内；也许可以为其设置一个尺寸，或者在几个断点处设置静态尺寸以逐步放大尺寸.

There's some imprecision in browser renderings, especially when percentages or viewport units come into play. In this case, I'd consider whether it's actually worth it to make the height of those lines tied to the viewport. It seems limited to within a few pixels of variance for most screen sizes; maybe either set one size for it, or set static sizes at several breakpoints to gradually scale it up.

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

这篇关于VH单元行为不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！