响应式布局

响应式布局

+

先了解页面的布局方式：

* 响应式布局（最常用）:随窗口变化去变化
* 流式布局
* 自适应布局

响应式布局要结合多媒体@media

下面是学习的实例:

demo

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>响应式布局</title>
		<link rel="stylesheet" href="CSS/响应式布局.css">
	</head>
	<body>
		<div class="div1">
			<img src="image/zxz.png" alt="" width="100%"/>
			<p>a</p>
		</div>
		<div class="div2">
			<img src="image/zxz.png" alt="" width="100%"/>
			<p>b</p>
		</div>
		<div class="div3">
			<img src="image/zxz.png" alt="" width="100%"/>
			<p>c</p>
		</div>
		<div class="div4">
			<img src="image/zxz.png" alt="" width="100%"/>
			<p>d</p>
		</div>
		<div class="div5">
			<img src="image/zxz.png" alt="" width="100%"/>
			<p>e</p>
		</div>
		<div class="div6">
			<img src="image/zxz.png" alt="" width="100%"/>
			<p>f</p>
		</div>
		<div class="div7">
			<img src="image/zxz.png" alt="" width="100%"/>
			<p>g</p>
		</div>
	</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
@media screen and (max-width:500px){
	body{
		background:white;
	}
}
@media screen and (min-width:500px) and (max-width:600px){
	body{
		background:gold;
	}
}
@media screen and (min-width:600px) and (max-width:700px){
	body{
		background:red;
	}
}
@media screen and (min-width:700px) and (max-width:800px){
	body{
		background:blue;
	}
}
@media screen and (min-width:800px) and (max-width:900px){
	body{
		background:pink;
	}
}
@media screen and (min-width:900px){
	body{
		background:black;
	}
}
.div1{
	background:red;
	margin:3%;
}
.div2{
	background:orange;
	margin:3%;
}
.div3{
	background:gold;
	margin:3%;
}
.div4{
	background:lightblue;
	margin:3%;
}
.div5{
	background:lightgreen;
	margin:3%;
}
.div6{
	background:green;
	margin:3%;
}
.div7{
	background:purple;
	margin:3%;
}
div{
	float:left;
}
@media screen and (min-width:800px){
	div{
		width:15%;
	}
	html{
		font-size:18px;
	}
}
@media screen and (min-width:600px) and (max-width:800px){
	div{
		width:23%;
	}
	html{
		font-size:14px;
	}
}
@media screen and (max-width:600px){
	div{
		width:30%;
	}
	html{
		font-size:10px;
	}
}
p{
	background:black;
	color:white;
	text-align:center;
	margin:0;
	font-size:2rem;
}
`

– the end –