使用vh的布局无法使用缩放进行缩放

Question

我尝试使用ONLY 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和vw属性绑定到视口大小。

许多浏览器（例如Chrome）的行为方式是，当用户使用浏览器的内置缩放功能进行操作来缩放浏览器时，vh值vw会发生相当大的变化。

但如果你使用csszoom属性vh并vw保持不变。

如果您需要克服此限制，您可以根据 CSS 中的缩放级别设置 CSS 变量。

html {
    zoom: 90%; /* zoom your page to 90% */
}

:root {
    --zoom: 0.9; /* set the variable saying what the current zoom is */
}

当使用vh和vw单位时，计算如下：

width: calc(100vw / var(--zoom));

Answer 2

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

放大时，将放大整个文档（而不是视口）。逻辑上是，如果还没有以视口单位定义该空间，则元素之间的空间会随着页面的放大而增加。由于其他元素不会增加，因此文档不成比例。

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