响应式布局：
1.媒体查询
@media常用参数
| 属性名称 | 作用 |
|---|---|
| width、height | 浏览器可视宽度、高度 |
| device-width | 设备屏幕的宽度 |
| device-height | 设备屏幕的高度 |
<style>
#<div>{
width: 100%;
height: 500px;
}
#div div{
float: left;
height: 200px; /*初始宽度*/
}
@media screen and(min-device-width:400px) and (max-device-width:400px){
#div0 div{ /*div0下的所有div通用属性*/
width: 33.3%;
}
#div div:nth-child(1){ /*类选择器1*/
background-color: red;
}
#div div:nth-child(2){ /*类选择器2*/
background-color: blue;
}
#div div:nth-child(3){ /*类选择器3*/
background-color: green;
}
}
@media screen and(min-device-width:300px) and (max-device-width:399px){
#div0 div{ /*div0下的所有div通用属性*/
width: 50%;
}
#div div:nth-child(1){ /*类选择器1*/
background-color: red;
}
#div div:nth-child(2){ /*类选择器2*/
background-color: blue;
}
#div div:nth-child(3){ /*类选择器3*/
background-color: green;
}
}
@media screen and(min-device-width:100px) and (max-device-width:200px){
#div0 div{ /*div0下的所有div通用属性*/
width: 100%;
}
#div div:nth-child(1){ /*类选择器1*/
background-color: red;
}
#div div:nth-child(2){ /*类选择器2*/
background-color: blue;
}
#div div:nth-child(3){ /*类选择器3*/
background-color: green;
}
}
</style>
<body>
<div id="div0">
<div></div>
<div></div>
<div></div>
</div>
</body>
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
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
上面代码可以简化成：
<style>
#<div>{
width: 100%;
height: 500px;
}
#div div{
float: left;
height: 200px; /*初始宽度*/
}
#div div:nth-child(1){ /*类选择器1*/
background-color: red;
}
#div div:nth-child(2){ /*类选择器2*/
background-color: blue;
}
#div div:nth-child(3){ /*类选择器3*/
background-color: green;
}
}
</style>
<style media="(min-device-width:400px) and (max-device-width:400px)">
#div0 div{ /*div0下的所有div通用属性*/
width: 33.3%;
}
</style>
<style media="(min-device-width:300px) and (max-device-width:399px)">
#div0 div{ /*div0下的所有div通用属性*/
width: 50%;
}
</style>
<style media="(min-device-width:100px) and (max-device-width:200px)">
#div0 div{ /*div0下的所有div通用属性*/
width: 100%;
}
</style>
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
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
改变主要是合并了重复的代码到公共区，并用style标签属性分隔
外部链接样式表：
html：
<link href="CSS/css1" rel="stylesheet">
<link href="CSS/css2" rel="stylesheet"
medio="(min-device-width:400px) and (max-device-width:500px)">
<link href="CSS/css3" rel="stylesheet"
media="(min-device-width:300px) and (max-device-width:399px)">
<link href="CSS/css4" rel="stylesheet"
media="(min-device-width:100px) and (max-device-width:200px)">
<body>
<div id="div0">
<div></div>
<div></div>
<div></div>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
CSS1(基本样式)
#<div>{
width: 100%;
height: 500px;
}
#div div{
float: left;
height: 200px; /*初始宽度*/
}
#div div:nth-child(1){ /*类选择器1*/
background-color: red;
}
#div div:nth-child(2){ /*类选择器2*/
background-color: blue;
}
#div div:nth-child(3){ /*类选择器3*/
background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
CSS2(400-500大小屏幕样式)
#div0 div{
width: 33.3%;
}
1
2
3
2
3
CSS3（300-399大小屏幕样式）
#div0 div{ /*div0下的所有div通用属性*/
width: 50%;
}
1
2
3
2
3
CSS4（100-200大小屏幕样式）
#div0 div{ /*div0下的所有div通用属性*/
width: 100%;
}
1
2
3
2
3