为什么`1vh` CSS大小解析为屏幕上的不同像素大小

Question

我有三个高度等于1vh`的div。

我的问题是它们在屏幕上以不同的像素大小显示。有时它们看起来相等，但有时却不相等，特别是在调整视口大小之后。请运行摘要以查看。

.samples {
  display:flex;
}

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

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

#set1 div{
  height:.3vh;
}

#set2 div{
  height:.7vh;
}

#set3 div{
  height:.9vh;
}

#set4 div{
  height:1.1vh;
}

<div class = "samples">

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

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

  <div class="container" id="set3" >
    <div></div>
    <div></div>
    <div></div>
  </div>
  
    <div class="container" id="set4" >
    <div></div>
    <div></div>
    <div></div>
  </div>
  
</div>
<div>
<h4>Above are four samples, each sample includes 3 identical div.</h4>
<h4>But depend on your screen size you may not see what expected</h4>
</div>

[我拍摄了一些屏幕快照，以演示调整大小期间实际发生的情况，您可以看到div的高度不同，尽管它们的高度均为1vh。

如果我在javascript中手动计算1vh并将其作为四舍五入的'px'注入CSS，则效果很好。

  
  const set1Height = Math.round(document.documentElement.clientHeight * .3 / 100);
  const set2Height = Math.round(document.documentElement.clientHeight * .7 / 100);
  const set3Height = Math.round(document.documentElement.clientHeight * .9 / 100);
  const set4Height = Math.round(document.documentElement.clientHeight * 1.1 / 100);
  

  document.documentElement.style.setProperty("--set1-height", `${set1Height}px`);
  document.documentElement.style.setProperty("--set2-height", `${set2Height}px`);
  document.documentElement.style.setProperty("--set3-height", `${set3Height}px`);
  document.documentElement.style.setProperty("--set4-height", `${set4Height}px`);
  

.samples {
  display:flex;
}

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

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

#set1 div{
  height: var(--set1-height);
}

#set2 div{
  height: var(--set2-height);
}

#set3 div{
  height: var(--set3-height);
}

#set4 div{
  height: var(--set4-height);
}

<div class = "samples">

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

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

  <div class="container" id="set3" >
    <div></div>
    <div></div>
    <div></div>
  </div>
  
    <div class="container" id="set4" >
    <div></div>
    <div></div>
    <div></div>
  </div>
  
</div>
<div>
<h4>But in here, after calculating heights and round them to `px` they looks identical</h4>
</div>

我首先想到的是将浮点数四舍五入导致这种情况，但是如果是这种情况，为什么CSS将一个浮点数四舍五入为三个不同的数字？

我的问题是为什么会这样，是否有任何纯CSS解决方案可使用视口大小并确保它们始终按预期显示？

Answer 1

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

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

因为<相对于视口的高度，所以在调整视口大小时可能会有所波动。

•'px'是绝对单位；但是'vh'是相对单位。