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 に答える