css - 使用 vh 的布局不随缩放缩放

Question

我试图创建一个仅使用 vh 大小的登录表单。这样做是希望整个表单能够根据视口(viewport)进行缩放。

没有!出于某种原因放大，在输入字段和下面的文本之间会创建一个空白区域，该空白区域会随着放大程度的增加而变大。

http://jsfiddle.net/TnY3L/

fiddle 制作的不是很好，只是从我的元素中复制的。但您可以看到哪里出了问题——这才是最重要的。

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

<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 和vw 单位是相对于视口(viewport)大小的度量。 1vh 是当前视口(viewport)高度的 1%，因此 100vh 始终是 100% 高度。无论放大和缩小多少，视口(viewport)的大小仍然相同。

放大时，会放大整个文档(但不是视口(viewport))。元素之间的空间随着页面的放大而增加是合乎逻辑的，如果该空间也没有以视口(viewport)单位定义的话。因为其他元素没有增加，所以文档不成比例。

如果您想创建在放大时缩放的元素，请尝试使用 rem 单位。这是相对于正文字体大小的，因此当您缩放页面时，以 rem 表示的每个值都会相应缩放。