使用 vh 的布局不会随缩放而缩放

Question

我尝试使用仅vh 大小创建登录表单。 这样做是为了希望表单总体上会根据视口进行缩放。

没有！出于某种原因，放大时会在输入字段和下面的文本之间创建一个随着放大而不断变大的空白区域。

http://jsfiddle.net/TnY3L/

小提琴制作得不是很好，只是从我的项目中复制的。 但你可以看到哪里出了问题——这才是最重要的。

有人知道我该如何解决这个问题吗？

<span id="loginform">
    <input type="text" name="login" class="LFORM" placeholder="USERNAME" />
    <input type="password" name="password" class="LFORM" placeholder="PASSWORD" />
    <button id="LB" type="button" style="font-size: 1.4vh;">OK!</button><br />
    <a href="" id="CALINK" style="font-size:1.4vh;">Create account</a>
    <a href="" id="FLLINK" style="font-size:1.4vh;">Forgot login?</a>
</span>

::-webkit-input-placeholder {
     font-size: 1.4vh;
}
#loginform {
     float: right;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     right: 1.5vh;
}
#CALINK {
     float:left;
     font-family:my_fat_font;
}
#FLLINK {
     float:right;
     font-family:my_fat_font;
}
#LB {
     border-radius: 0.4vh;
     font-family: my_fat_font;
     color: #ffffff;
     background: #ff9f2d;
     padding: 0.2vh 0.8vh 0.2vh 0.8vh;
     text-decoration: none;
     border: none;
     height: 2vh;
     margin-left: .5vh;
     margin-right: 0px;
     border: 0;
}
#LB:hover {
     background: #3e4188;
     text-decoration: none;
} 
.LFORM {
     width: 10vh;
     height: 1.8vh;
     border-radius: .3vh;
     border: none;
     padding-left: .6vh;
}
[placeholder]:focus::-webkit-input-placeholder {
     color: transparent;
}
#loginform a:hover {
     color: #ff9f2d;
     text-decoration:underline;  
}
#loginform a {
     color: #ff9f2d;
     text-decoration: none;
}

Answer 1

vh 和 vh 单位是相对于视口大小的度量。 1vh 是当前视口高度的 1%，所以 100vh 始终是 100% 高度。无论您放大和缩小多少，视口仍然是相同的大小。

放大时，会放大整个文档（但不是视口）。如果在视口单元中也没有定义该空间，那么放大页面时元素之间的空间会增加是合乎逻辑的。因为其他元素没有增加，所以文档不成比例。

如果您想创建随放大而缩放的元素，请尝试使用rem 单位。这与正文的字体大小有关，因此当您放大页面时，rem 中表示的每个值都会相应地缩放。