html - 如何在不使用 Bootstrap 的情况下使 HTML 表单输入字段响应

Question

我有一个非常基本的 HTML 表单，其中有两个并排的文本输入字段(名称和公司)以及下面的提交和返回按钮。

我想让输入字段的宽度随着浏览器宽度的减小而缩小。

请参阅第一个附加图像以了解它当前在全宽下的外观，以及第二个附加图像以了解当浏览器窗口缩小时我希望它的外观。

我试过将整个 Form 包装在一个 Div 中并将 Div 设置为 width: 100%;但它没有效果..我也尝试过其他各种调整但感觉我在风中飘荡，因为我真的不知道我应该改变什么..有什么想法吗？

<form action="" method="post">
    <div class="row" align="center">

        <div class="column left">
            <label for="name">Name<span class="err"></span></label><br>
            <input id="name" type="text" name="Name"><br>
        </div>
        <div class="column right">
            <label for="company">Company<span class="err"></span></label><br>
            <input id="company" type="text" name="Company"><br>
        </div>

    </div>

    <div align="center">
        <a href="#"><button class="back-btn" type="button">Back</button></a>
        <input class="sign-in-btn" type="submit" value="Sign In">
    </div>

</form>



    * {
        box-sizing: border-box;
    }

    .row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 45px;
        text-align: left;
    }


    input[type=text], select {
        width: 550px;
        height: 100px;
        margin: 10px 15px 50px;
        border: 3px solid #d9569f;
        border-radius: 50px;
        outline: none;
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        text-align: center;
        text-align-last: center;
    }


    label {
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        color: #555;
        margin-left: 30px;
    }


    input.sign-in-btn {
        width: 250px;
        height: 100px;
        border: 3px solid #fff;
        border-radius: 50px;
        outline: none;
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        color: #fff;
        background: #d9569f;
        margin-left: 30px;
    }


    .sign-in-btn:active {
        color: #d9569f;
        background-color: #fff;
        border: 3px solid #d9569f;
    }


    .back-btn {
        width: 250px;
        height: 100px;
        border: 3px solid #fff;
        border-radius: 50px;
        outline: none;
        font-family: sofia-pro-soft, sans-serif;
        font-weight: 300;
        font-size: 30px;
        color: #fff;
        background: #d9569f;
        margin-right: 30px;
    }


    .back-btn:active {
        color: #d9569f;
        background-color: #fff;
        border: 3px solid #d9569f;
    }


    a {
        color: #fff;
        text-decoration: none;
    }

Answer 1

你可以尝试这样的事情:

@media only screen 
and (max-device-width: 800px)
    { 
        input[type=text], select {
            width: 400px;
            ...
    }
}

max-device-width括号内的部分只在指定的设备屏幕宽度值下有效。