7

我尝试使用仅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;
}
4

1 回答 1

8

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

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

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

于 2015-04-21T07:36:17.817 回答