html - 我将如何使这个 div 响应

Question

首先我想说我在设计和使用 CSS 方面非常糟糕，所以我想知道我是否可以得到一些帮助来使我的 div 响应。它目前位于正在工作的屏幕中间，但是，当在不同的屏幕上使用时，它会被全部压扁(宽度方向和高度方向)。文本也没有改变。即使在 1080p 显示器上使用时，它也有滚动条，所以我真的很困惑如何设计它。我在下面粘贴了 HTML 和 CSS。

<div id="mainForm">
        <form id="userForm" method="post">
            <p id="userP">Username: <br>
                <input id="Username" type="text" name="Username" placeholder="Username" onfocus="this.placeholder='';" onblur="this.placeholder='Username';">

            <p id="passP">Password: <br>
                <input id="Password" type="password" name="Password" placeholder="Password" onfocus="this.placeholder='';" onblur="this.placeholder='Password';">

            <p id="emailP">Email: <br>
                <input id="Email" type="text" name="Email" placeholder="Email Address" onfocus="this.placeholder='';" onblur="this.placeholder='Email Address';">

            <p id="authP">Auth Code: <br>
                <input id="auth2" type="text" name="Auth" placeholder="Auth Code" onfocus="this.placeholder='';" onblur="this.placeholder='Auth Code';"><br>

            <input type="submit" id="submit" name="submit" value="Login"/>

            <h4>Don't have an account? <a href="register.php" >Register!</a></h4>
        </form>
    </div>

主 DIV 的 CSS:

#mainForm{
width: 20vw;
height: 40vh;
background-color: white;
margin:auto;
font-family: Montserrat;
text-align: center;
align-items: center;
margin-top: 2%;
position: absolute;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

表单元素的 CSS:

#Username, #Password, #Email, #Auth, #auth2 {
border: none; border-bottom: 2px solid;
padding: 0.5%;
margin-left: 1%;
width:40%;
transition: width 1s;
-webkit-transition: width 0.8s;
text-align: center;
font-size: 16px;
}

#Username:focus, #Password:focus, #Email:focus, #auth2:focus {
    width: 60%;
}

 #userP, #passP, #emailP, #authP{
    font-size: 20px;
}
#userP{
    margin-top:15%;
}

谢谢。

Answer 1

首先在你的 HTML 头部设置 meta viewport 标签

<meta name="viewport" content="width=device-width, initial-scale=1">

其次使用完全响应式的引导框架，然后将您的 div 包装在列中

<div class="container">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <!-- your form goes here -->
    </div>
  </div>
</div>

内部<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">您可以添加更多类并更改它们的 CSS 属性，例如最大宽度、最小宽度、边距顶部等。