响应式布局

一、 MediaQuery媒体查询

什么是媒体查询？

为不同尺寸的屏幕设定不同的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

效果截图：

@mdeia常用参数

width、height 浏览器可视宽度、高度

device-width 设备屏幕的宽度

decive-height 设备屏幕的高度

需求：根据不同的宽度显示不同个数的div盒子

  
  
  
  
  



  

    
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
65

效果截图：

媒体查询其他引入方式

1、style标签，写在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
39
40
41

2、link引入，写在link标签中，有条件的引入外部样式表

mediaQuery.css

 /* 媒体查询 */
 /* 一行显示3个div */
 @media screen and (min-device-width:400px) {
   #div0 div {
     width: 33.3%;
   }
 }

 /* 一行显示2个div */
 @media screen and (min-device-width:200px) and (max-device-width:399px) {
   #div0 div {
     width: 50%;
   }
 }

 /* 一行显示1个div */
 @media screen and (max-device-width:199px) {
   #div0 div {
     width: 100%;
   }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

mediaQuery.html

二 、flex弹性布局

概念：FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题

flex-direction 子元素在父元素盒子中的排列方式（父元素添加这属性）

注意：如果父元素的宽度设置较小，子元素的总宽度远远超出了父元素的宽度，那么子元素设置的宽度无效，会自动压缩来适应父元素;

flex-wrap 子元素在父元素盒子中是否换行/列（父元素添加这属性）

flex-flow 是flex-direction和flex-wrap属性的简写形式

形式：flex-flow：row wrap

justify-content 用来存在剩余空间时，设置为间距的方式 (父元素中设置)

align-items 设置单行flex元素在交叉轴上的默认对齐方式 （父元素中设置）

举例：

  
  
  
  
  



  

    
1
    
2
    
3
    
4
  



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

align-content 设置多行flex元素在交叉轴上的默认对象方式

举例：

.div0 {
      width:700px;
      height: 400px;
      background-color: pink;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around; /* 设置子元素的间隔 */
      /* align-items: center;单行对齐方式 */
      align-content:center; /*多行对齐方式*/
    }
1
2
3
4
5
6
7
8
9
10

其他属性 （子元素中设置）

• flex-basis 设置子对象的基准值

值设置为px

 


  

    
1
    
2
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

值设置为%

.div0 div {
      width: 200px;
      height: 200px;
      background-color: yellow;
      /* 两个div占父元素宽度的百分之30，也就是 400*0.3=120px */
      flex-basis: 30%; 
    }
1
2
3
4
5
6
7

分别用来设置不同div的宽度

 .div0 div {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }

    .div0 div:nth-child(1) {
      flex-basis: 30px;
    }

    .div0 div:nth-child(2) {
      flex-basis: 50px;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

注意：如果子元素设置了flex-basis，那么它原先设置的宽度将失效

• flex-grow 设置盒子的扩展比率

说人话就是，把父元素没有占满的宽度，子元素按照一定的份数去占满。

如flex-grow设置值是数字，如果数字 >=1 则代表允许扩展；反之不允许

 
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

flex-grow 前提是的要有空余的宽度

• flex-shrink 设置盒子的缩小比率

说人话就是，把超出的父元素的宽度，按照一定的比率去缩小，默认是是开启缩小的，我们可以设置flex-shrink:0;代表不开启缩小,这样我们就可以看到超出父元素的区域

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

特殊写法：

案例：

  
  
  
  
  


  

    姓名
    
    Go
  


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

三 、rem的使用方法

概念：指相对于根元素的字体大小的单位

区别：em相对于父级的字体大小的单位

案例：使用媒体查询+rem/js，实现 在不同宽度的视口下自动调整字体大小

  
  
  
  
  

  


  
123


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

自适应布局

不同的设备用不同的页面或局部伸缩

案例1：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
51
52
53
54
55
56
57

案例2：

  
  
  
  
  



  

    

    

      

        
分类1
        
分类2
        
分类3
        
分类4
        
分类5
        
分类6
      
      

        
图片
        
图片
        
图片
        
图片
        
图片
        
图片
        
图片
        
图片
      
    
  



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

css/big.css

* {
  margin: 0;
  padding: 0;
  background-color: #f5f5ff;
}

.layout {
  display: flex;
  width: 80%;
  margin: 0 auto;
  flex-direction: column; /* 主轴方向是纵向 */
}

.layout .top {
  flex: 0 0 50px;
  background-color: yellow;
  margin-top: 10px;
}

.layout .main {
  display: flex;
  flex: 0 0 100%;
}

.layout .main div:nth-child(1) {
  display: flex;
  flex:0 0 10%;
  flex-wrap: wrap;
}

.layout .main div:nth-child(1) li {
  flex:0 0 100%;
  height: 64px;
  line-height: 64px;
  text-align: center;
  list-style-type: none; /* 去掉li前面的小圆点 */
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

.layout .main div:nth-child(2) {
  display: flex;
  flex:0 0 90%;
  flex-wrap: wrap;
  justify-content:flex-start ;
}

.layout .main div:nth-child(2) li {
  flex:0 0 30%;
  height: 120px;
  text-align: center;
  list-style-type: none; /* 去掉li前面的小圆点 */
  background-color: yellow;
  margin-top: 10px;
  margin-right: 10px;
}

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

学习视频
慕课网： https://www.imooc.com/learn/1285