响应式设计
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1
# container
/* */
.container {
width: 100%;
}
/* max-width */
.container {
max-width: 80%;
margin: 0 auto;
}
/* media query */
.container {
width: 800px;
}
@media (max-width:900px) {
.container {
width: 600px;
}
}
@media (max-width:700px) {
.container {
width: 500px;
}
}
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
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
# layout
/* flex: 宽度过窄会出现异常 */
.container {
display: flex;
}
/* 屏幕过窄会影响阅读，设置换行*/
.container {
display: flex;
flex: wrap;
}
.container p {
flex: 250px;
}
/* grid */
.container {
display: grid;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
/* 屏幕过窄会影响阅读，设置换行*/
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* 或采取grid + media query 手动控制列数*/
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 900px) {
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.container {
display: grid;
grid-template-columns: 1fr;
}
}
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
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
# image
img {
max-width:100%;
}
1
2
3
2
3
<!-- 1 -->
<img
src="../image-300.png"
srcset="
../image-1240.png 1240w,
../image-600.png 600w,
../image-300.png 300w,
"
size="(max-width: 400px) 300px, (max-width: 900px) 600px, 1240px"
/>
<!-- 2 -->
<picture>
<source media="(max-width: 400px)" srcset="../image-300.png" />
<source media="(max-width: 900px)" srcset="../image-600.png" />
<img src="../image-1240.png" />
</picture>
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
# font
/* rem or vw */
h1 {
font-size: 4rem;
}
@media (max-width: 900px) {
h1 {
font-size: 3rem;
}
}
@media (max-width: 700px) {
h1 {
font-size: 2rem;
}
}
/* func calc */
h1 {
font-size:calc(2rem + 2vw);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
编辑 (opens new window)
上次更新: 2023/09/17, 23:41:49