时间戳

首页 > 解决方案 > CSS和Html调整登录表单高度而不挤压小屏幕上的文本框？

html - CSS和Html调整登录表单高度而不挤压小屏幕上的文本框？

问题描述

我有一个登录表单，当在较小的屏幕上查看时，文本框会被压缩到一个非常窄的高度。当我为父级login-form和login-container容器设置高度时，父级的高度会增加，但文本框不会增加，它们仍然很窄。
Q：小屏观看时如何让高度变高？
html:

    <!-- Login form -->
    <div  class="login-form animate" >
        <form action= "" method="post">
            <div class="login-container ">
                <h2>Welcome!</h2>

                <input type="text" placeholder="Username.." name="uname" id="uname" required>
                <input type="password" placeholder="Password.." name="passw" id="passw" required>
                <input type="hidden" name="token" id="token" value= <?php echo $_SESSION["loggedin"] ?> >

                <button class="logbut" type="submit" name="login" id="login">Login</button>

            </div>
        </form>
        <form action= "index.php" method="post">
            <div class="login-container ">
                <label>
                    <input class="pswreset" type="submit" name="forgot" id="forgot" value="Forgot password?">
                </label>
            </div>
        </form>
    </div>

CSS：

.login-container {
    padding: 16px;
}

.login-form {
    left: 1%;
    right: 1%;
    position: absolute;
    width:25%;
    text-align: center;
    margin-right:auto;
    margin-left:auto;
    display: grid;
    grid-template-columns: auto;
    align-content: center;
    background-color: #FFFFFF;
    border-radius: 4px;
}
/*Small media devices specific styles*/
@media screen and (max-width: 800px) {
/*-------------Login page------------*/
    .login-form, .login-topnav {
        width: 100%;
        max-width:100%;
        margin: 0px;
        padding: 0px;

    }

    .login-container {
        margin: 0px;
        width: 100%;
        max-width:100%;
        padding: 0px;
    }

}

标签： htmlcssbrowser

解决方案

所以我解决了我的问题。您只需将各个文本框设置为所需的高度单位，在我的情况下，6vh Relative to 1% of the height of the viewport*即：

/*Small media devices specific styles*/
@media screen and (max-width: 800px) {
/*-------------Login page------------*/
    input[type=text], input[type=password], input[type=email] {
        width: 99%;
        padding: 0px;
        height: 6vh;
    }

推荐阅读