使用CSS视口单位后，相同尺寸在调整大小时在屏幕上显示不同

Question

我的目标是制作一个响应式汉堡菜单，每当浏览器屏幕尺寸改变时，它就会放大和缩小。

我有三个div，它们的高度相对于视口高度相同。我的问题是在调整浏览器大小时，有时它们以相同的高度出现，但有时却不一样。

HTML

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

.container{
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 20vh;
  width:20vh;
}

.container div{
  background: #000;
  width:100%;
  height:1vh;
}

[如果有人知道我在做什么错或对此有任何解决方案，请帮助我。

我拍了一些屏幕快照，以演示调整大小期间实际发生的情况，因为您看到的高度应该都是相同的，因为它们都是1vh高度。

Answer 1

我通过使用'px'而不是'vh'解决了这个问题

.container div{
  background: #000;
  width:100%;
  height:6px;
}