pc端可以通过设置版心来,完成不同屏幕的适配？
移动端一般采用流式布局(百分比布局)
1. 高度定死,宽度自适应
2. 对于大的轮播图等,宽度100%自适应
3. 对于小图标挥着文本,一般都是固定宽高大小
流式布局的缺点: 对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长
解决方案: rem布局(宽高自适应)
经典的流式布局
//1. 左侧固定,右侧自适应
//2. 右侧固定左侧自适应
//3. 两侧固定,中间自适应(圣杯布局)
//4. 等分布局
1和2左侧固定,右侧自适应和右侧固定左侧自适应
代码
方法一: felx布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.father {
display: flex;
height: 800px;
background-color: pink;
}
.left {
width: 200px;
height: 300px;
background-color: red;
}
.right {
flex: 1;
height: 500px;
background-color: green;
}
</style>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
页面显示
01.png
方式2： position绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.father {
height: 800px;
background-color: pink;
position: relative;
padding-left: 200px;
}
.left {
width: 200px;
height: 500px;
background-color: red;
/* 决定定位 */
position: absolute;
top: 0;
left: 0;
}
.right {
height: 600px;
background-color: green;
padding-left: 200px;
}
</style>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
方式3: bfc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.father {
height: 600px;
background-color: pink;
}
.left {
width: 200px;
height: 400px;
background-color: red;
float: left;
}
.right {
height: 500px;
background-color: green;
overflow: hidden;
}
</style>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
代码解释：overflow: hidden; 触发了bfc，触发了bfc的盒子不与浮动的盒子重叠
两边固定中间自适应(圣杯布局)-bfc实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
height: 800px;
background-color: pink;
display: flex;
flex: 1;
}
.left {
width: 200px;
height: 600px;
background-color: red;
}
.middle {
width: 100%;
height: 800px;
background-color: aquamarine;
flex: 1;
}
.right {
width: 200px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</body>
</html>
页面显示
03.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
height: 800px;
background-color: pink;
margin-left: 200px;
margin-right: 200px;
}
.left {
width: 200px;
height: 400px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.right {
width: 200px;
height: 600px;
background-color: green;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
页面显示
04.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.father {
height: 800px;
background-color: pink;
}
.left {
width: 200px;
height: 400px;
background-color: red;
float: left;
}
.center {
height: 600px;
background-color: orange;
overflow: hidden;
}
.right {
width: 200px;
height: 400px;
background-color: green;
float: right;
}
</style>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>
页面显示
05.png
等分布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
overflow: hidden;
}
li {
width: 25%;
float: left;
list-style: none;
background-color: pink;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
页面显示
02.png
移动端的宽度不同,而等分布局是用百分之25%，会分局宽度不同来进行分配
网友评论