一.PC端和移动端的不同

PC端网页和移动端网页的有什么不同？
PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

   视口标签
    
    
1
2
3

二.固定定位+流式布局

固定定位+流式或百分比布局写法 宽度百分比，高度固定。

代码块



    
    
    
    
    


    

        

            

                
            
            

                
            
            

                
            
            

                
            
            

                
            
        
    


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

三.Flex布局

1.基础

目标：能够使用Flex布局模型灵活、快速的开发网页
Flex布局/弹性布局：
①是一种浏览器提倡的布局模型，性能高
②布局网页更简单、灵活
③避免浮动脱标的问题

    
1
2
3
4
5
6
7
8
9
10
11
12
13

2.Flex主轴对齐方式

    
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

3.Flex侧轴对齐方式

    
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

4.伸缩比

属性
flex : 值;
取值分类：数值(整数)
注意: 只占用父盒子剩余尺寸

    
    
    
    
    


    

        
1
        
2
        
3
    


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

5.更改主轴方向

目标：使用flex-direction改变元素排列方向

    
    
    
    
    



            

                媒体
            
 

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

6.弹性盒子换行

问题：flex会造成弹性效果，不会推到下一行，会自动压缩宽度，就会破坏原有图形块的边框宽度。
目标：使用flex-wrap实现弹性盒子多行排列效果

    
    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
    


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