响应式登录页面
1.前置知识：响应式布局
参考资料：www.bilibili.com/video/BV1ov…
1.1媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>媒体查询</title>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 100%;
height: 100vh;
background-color: red;
}
#app div {
float: left;
width: 33.3%;
height: 100px;
background-color: skyblue;
/* 文本居中 */
text-align: center;
line-height: 100px;
}
/* 0-1000px */
@media screen and (max-width: 1000px) {
#app div {
width: 33.3%;
}
}
/* 0-800px */
@media screen and (max-width: 800px) {
#app div {
width: 50%;
}
}
/* 0-600px */
@media screen and (max-width: 600px) {
#app div {
width: 100%;
}
}
</style>
</head>
<body>
<div id="app">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
响应式登录页面
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<title>响应式登录框</title>
<link rel="stylesheet" href="./登录框.css">
</head>
<body>
<div class="content">
<div class="login-content">
<a href="" class="banner-box"></a>
<div class="login-box">
<h1>账号登录</h1>
<input type="text" placeholder="账号">
<input type="password" placeholder="密码">
<button class="login-btn">登录</button>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.content{
width: 100vw;
height: 100vh;
background: url(./bg.jpg) no-repeat center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.login-content{
position: relative;
width: 800px;
height: 360px;
background-color: rgb(149, 98, 170);
border-radius: 30px;
padding: 30px;
}
.banner-box{
display: inline-block;
width: 500px;
height: 100%;
background: url(./bg.jpg) no-repeat;
/* cover 铺满 图片铺满盒子*/
background-size: cover;
border-radius: 20px 0 0 20px;
}
.login-box{
width: 330px;
height: 100%;
position: absolute;
top: 0;
right: 0;
border-radius: 0 30px 30px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.login-box>h1{
font-size: 36px;
margin: 60px 0;
color: #fff;
}
.login-box>input{
margin-bottom: 20px;
width: 200px;
height: 36px;
padding: 0 20px;
border-radius: 36px;
/* 解决点击响应 */
border: none;
outline: none;
font-size: 18px;
}
.login-btn{
width: 200px;
height: 36px;
background-color: rgb(122, 4, 168);
border: none;
border-radius: 36px;
color: #fff;
font-size: 18px;
margin-bottom: 20px;
}
/* 平板适配 */
@media screen and (max-width: 900px){
.login-content {
margin: 0 30px;
}
.banner-box {
border-radius: 20px;
}
.login-box {
background-color: rgba(74, 20, 118, 0.5);
}
}
/* 手机适配 */
@media screen and (max-width: 600px) {
.content {
background: url(./bg.jpg) no-repeat center;
}
.login-content {
background-color: transparent;
}
.banner-box {
display: none;
}
.login-box {
position: initial;
margin: -40px auto;
background-color: transparent;
}
}
易错点
- 背景图最好作用于content盒子而非body
如果您将上述样式直接应用于body元素，它会成为文档的根元素，并且所有其他元素都是它的子元素。这种方式可能会导致后面的子盒子效果不同，原因如下。
首先，您将背景图片的样式应用于body元素时，这个背景图片会填满整个可视区域（viewport），并且不会自动缩放以适应当前显示设备的尺寸。这意味着当用户改变设备的尺寸或者旋转设备屏幕时，背景图片的显示效果可能会发生变化，从而影响其他元素的显示效果。
其次，在 body 元素中添加内容并不是一个很好的实践，并且这会影响到其他的样式设置，导致样式冲突或者影响到其他元素的布局。因为 body 元素是文档的根元素，任何样式定义都会影响所有子元素，这意味着在使用它作为容器时，您必须非常小心地编写 CSS 规则以确保不会对其他元素产生不必要的影响。
相比之下，使用类似于 "content" 的 div 元素作为容器，可以更好地控制网页的布局和样式，避免出现不必要的错误和冲突，同时使其他子元素更容易调整和定位。
因此，建议您将背景图片的样式应用于一个类似于 "content" 的元素上，这个元素可以作为网页的主体内容区域，并将其他需要添加的子盒子放在这个容器内。这样做可以更好地组织和控制布局和样式，并最大限度地减少出现不必要的错误和冲突的机会。
- 使用meta属性的user-scalable=no禁止缩放
