利用css媒体查询制作响应式登录注册功能

（1）媒体查询属于css3的新特性

（2）@media主要是根据屏幕的宽高度来自定义内容样式

（3）接下来我们展示一下样图吧~~~~

（4）ok接下来我们展示一下代码的实现

（5）首先是html的代码展示

<section>
			<div class="container">
				<!-- 第一个登录 -->
				<div class="user signinBx">
					<!-- 放图片 -->
					<div class="imgBx"><img src="img/12.jpg"></div>
					<!-- 表单内容 -->
					<div class="formBx">
						<form action="响应式登录01.html" method="">
							<h2>登录</h2>
							<input type="text" placeholder="输入用户名" class="bb"/>
							<p class="an">我是你爹</p>
							<input type="password" placeholder="输入密码" class="aa"/>
							<p class="bn">我的</p>
							<input type="submit" value="登入" class="btn1"/>
							<p class="signup">没有账号?<a href="javascript:;" onclick="zhuan()">注册</a></p>
						</form>
					</div>
				</div>
				<!-- 第二个注册 -->
				<div class="user signupBx">
					<!-- 表单内容 -->
					<div class="formBx">
						<form>
							<h2>注册</h2>
							<input type="text" placeholder="输入用户名" />
							<input type="text" placeholder="输入邮箱地址" />
							<input type="password" name="" placeholder="创建一个密码" />
							<input type="password" name="" placeholder="确认密码" />
							<input type="submit" value="注册" style="background-color: #e73e49; cursor: pointer;" />
							<p class="signup">已经创建账号?<a href="javascript:;" onclick="zhuan()"> 登录</a></p>
						</form>
					</div>
					<!-- 放图片 -->
					<div class="imgBx"><img src="img/34.jpg"></div>
				</div>
			</div>
		</section>

（6）接下来是css代码的实现

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
section{
	position: relative;
	/* background-color: #557085; */
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	transition: all .5s;
	background-image: linear-gradient(to top,rgb(91,114,107) 40%,rgb(132,151,148) 60%);
/* 	background: url(../img/12.jpg) no-repeat ;
	background-size: cover; */
	
}
section .container{
	position: relative;
	width: 800px;
	height: 500px;
	background-color: #fff;
	box-shadow: 15px 15px 100px rgba(0,0,0,.4);
	overflow: hidden;
	border-radius: 10px;
}
section .container .user{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
}
section .container .user .imgBx{
	position: absolute;
	width: 50%;
	height: 100%;
	transition: all .5s;
}
section .container .user .imgBx img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section .container .user .formBx{
	position: relative;
	width: 50%;
	height: 100%;
	transform: translateX(100%);
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
	transition: all .5s;
}
section .container .user .formBx h2{
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
	color: #555;
}
section .container .user .formBx input{
	width: 100%;
	padding: 10px;
	background-color: #f5f5f5;
	color: #333;
	border: none;
	outline: none;
	box-shadow: none;
	font-size: 14px;
	margin: 8px 0;
	letter-spacing: 1px;
	font-weight: 300;
}
section .container .user .formBx input[type="submit"]{
	max-width: 100px;
	background-color: #677eff;
	color: white;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1px;
	transition: all .5s;
}
section .container .user .formBx .signup{
	position: relative;
	margin-top: 20px;
	font-size: 12px;
	letter-spacing: 1px;
	color: #555;
	font-weight: 300;
}
section .container .user .formBx .signup a{
	font-weight: 600;
	text-decoration: none;
	color: #577eff;
}
/*      */
section .container .signupBx{
	pointer-events: none;
}
section .container .signupBx .formBx{
	top: 100%;
}
section .container.active .signupBx .formBx{
	top: 0;
}
section .container .signupBx .imgBx{
	top: -100%;
	transition: all .5s;
}
section .container.active .signupBx .imgBx{
	top: 0;
}
section .container.active .signupBx{
	pointer-events: initial;
}
/*    */
section .container .signinBx .formBx{
	top: 0;
}
section .container.active .signinBx .formBx{
	top: 100%;
}
/*  */
section .container .signinBx .imgBx{
	top: 0;
	transition: all .5s;
}
section .container.active .signinBx .imgBx{
	top: -100%;
}
section.active{
	background-color: rgb(120,117,111);
/* 	background: url(../img/34.jpg) no-repeat;
	background-size: cover; */
	background-image: linear-gradient(to top ,rgb(80,85,79) 30%,rgb(120,117,111) 70%);
}

/*  */
@media (max-width:991px) {
	section .container{
		max-width: 400px;
	}
	section .container .imgBx{
		display: none;
	}
	section .container .user .formBx{
		width: 100%;
		transform: translateX(-2%);
	}
}
/*  */
.an{
	display: none;
	font-size: 10px;
	float: right;
}
.bn{
	display: none;
	font-size: 10px;
	float: right;
}
.wrong{
	color: red;
}
.right{
	color: green;
}

（7）JavaScript代码来实现登录注册的校验功能

function zhuan() {
				var container = document.querySelector(".container")
				var section = document.querySelector("section")
				container.classList.toggle('active')
				section.classList.toggle("active")
			}
			
			var aa=document.querySelector(".aa")
			var bb=document.querySelector(".bb")
			var an=document.querySelector(".an")
			var bn=document.querySelector(".bn")
			var btn1=document.querySelector(".btn1")
			aa.onblur=function(){
				if(aa.value==''){
					bn.className="bn wrong"
					bn.innerHTML="未输入密码"
					bn.style.display="block"
				}else if(aa.value.length<7 || aa.value.length>16){
					bn.className="bn wrong"
					bn.innerHTML="在7到16位之间"
					bn.style.display="block"
				}else{
					bn.className="bn right"
					bn.innerHTML="输入正确"
					bn.style.display="block"
				}
			}
			bb.onblur=function(){
				if(bb.value==''){
					an.className="an wrong"
					an.innerHTML="未输入用户名"
					an.style.display="block"
				}else if(bb.value.length<5 || bb.value.length>10){
					an.className="an wrong"
					an.innerHTML="在5到10位之间"
					an.style.display="block"
				}else{
					an.className="an right"
					an.innerHTML="输入正确"
					an.style.display="block"
				}
			}

（8）ok啦~~~就到这里吧，图片大家可以自己去找