小编Mak*_*kan的帖子

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

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

我的问题是它们在屏幕上以不同的像素大小出现。有时它们看起来相等但有时不相等，特别是在调整视口大小后发生。请运行代码段查看。

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

Run Code Online (Sandbox Code Playgroud)

<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> …

Run Code Online (Sandbox Code Playgroud)

html javascript css viewport responsive

Mak*_*kan

2020 05-01

7
推荐指数

1
解决办法

397
查看次数