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头中设置元视口标记

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

第二个使用完全响应的bootstrap框架，然后将div包装在列

中

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

在text1 = [|] text2 = [|] text3 = [|] text4 = [|]内，您可以添加更多类并更改其CSS属性，如max-width，min-width，margin-top等。

Answer 2

您可能希望坚持使用像素代替begin()和vw这样一个小窗口来使用。我会建议vh的身高和宽度（我检查了一下，内容看起来没问题。）

正如@Friday Ameh所指出的，通常你会想要使用 media-queries ，但在这种情况下，宽度的大小不会离开屏幕，因为最小无论如何，屏幕大小（移动）通常都在300px左右。

您可能希望将媒体查询用于更大的屏幕，因此它不会像350px一样小，但这取决于您和依赖在你的设计上。

我能继续帮助你吗？

Answer 3

你需要在像素中添加高度

#mainForm {
	width: 320px;
	height: 340px;
	background-color: white;
	font-family: Montserrat;
	text-align: center;
	align-items: center;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
#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%;
}

	<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响应

3 个答案: