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

我尝试只使用

vh

大小创建登录表单。 这样做的目的是希望窗体总体上能够根据视口进行相应的缩放

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

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

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

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

好的

：-webkit输入占位符{
字体大小：1.4vh；
}
#登录表单{
浮动：对；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
右：1.5vh；
}
#卡林克{
浮动：左；
字体系列：我的字体；
}
#FLLINK{
浮动：对；
字体系列：我的字体；
}
#磅{
边界半径：0.4vh；
字体系列：我的字体；
颜色：#ffffff；
背景#ff9f2d；
填充：0.2vh 0.8vh 0.2vh 0.8vh；
文字装饰：无；
边界：无；
高度：2vh；
左边距：.5vh；
右边距：0px；
边界：0；
}
#LB：悬停{
背景#3e4188；
文字装饰：无；
} 
.L表格{
宽度：10vh；
高度：1.8vh；
边界半径：.3vh；
边界：无；
左侧填充：.6vh；
}
[占位符]：焦点：：-webkit输入占位符{
颜色：透明；
}
#登录表单a：悬停{
颜色：#ff9f2d；
文字装饰：下划线；
}
#登录表单a{
颜色：#ff9f2d；
文字装饰：无；
}

和

vh

单位是相对于视口大小的测量值

1vh

是当前视口高度的1%，因此

100vh

始终是100%高度。无论您放大和缩小多少，视口的大小仍然相同

放大时，可以放大整个文档（而不是视口）。如果元素之间的空间没有以视口单位定义，则在放大页面时，元素之间的空间会增加，这是合乎逻辑的。因为其他元素不会增加，所以会使文档失去比例

---

如果要创建在放大时缩放的图元，请尝试使用

rem

单元。这与正文的字体大小有关，因此当您放大页面时，

rem中表示的每个值都会相应缩放。
我真的看不出有什么问题。视口高度没有改变，只是改变了其中的渲染方式。那么我可能对“vh”如何工作有一个错误的想法。在我看来，它将被渲染到完全相同的位置。视口应该代表显示器的物理空间。缩放不会更改显示器的物理空间，而是更改显示器的内容。把它想象成通过放大镜看东西。它实际上并没有改变物理对象的大小，只是改变了它被显示的大小。那么有没有其他合理的方法来实现这一点？像这样的？如果你拿一个div，给它
200px
宽度并放大，它会缩放吗？如果是，你的解释是错误的。