中软大前端0326-响应式布局

响应式布局

用媒体查询实现

  • max-width:768px 当最大宽度为480px时(即屏幕宽度小于768px时)的布局

  • min-width:480px 当最小宽度为768px时(即屏幕宽度大于480px时)的布局

@media only screen and (max-width:768px){}

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
94
95
96
97
98
99
100
101
102
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<style type="text/css">
*{
margin: 0 auto;
}
.container{
width: 100%;
background-color: burlywood;
}
header{
width: 80%;
height: 100px;
background-color: cadetblue;
}
article{
width: 80%;
height: 600px;
background-color: azure;
}
.left{
width: 20%;
height: 600px;
background-color: coral;
float: left;
}
.middle{
width: 60%;
height: 600px;
background-color: lightsalmon;
float: left;
}
.right{
width: 20%;
height: 600px;
background-color: indianred;
float: left;
}
footer{
width: 80%;
height: 80px;
background-color: #5F9EA0;
}
@media only screen and (min-width:480px) and (max-width: 768px) {
header{
width: 100%;
height: 100px;
background-color: cadetblue;
}
article{
width: 100%;
height: 600px;
background-color: azure;
}
.left{
width: 30%;
height: 600px;
background-color: coral;
float: left;
}
.middle{
width: 70%;
height: 600px;
background-color: lightsalmon;
float: left;
}
.right{
width: 100%;
height: 600px;
background-color: indianred;
float: left;
}
footer{
width: 100%;
height: 80px;
clear: left;
background-color: #5F9EA0;
}
}
</style>
</head>
<body>
<div class="container">
<header>
</header>
<article>
<section class="section1">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</section>
</article>
<footer></footer>
</div>
</body>

  • picture-source 实现响应式图片

    1
    2
    3
    4
    5
    6
    7
    <picture>
    <source media="(max-width:480px)" srcset="img/480x320.gif">
    <source media="(max-width:640px)" srcset="img/640x427.gif">
    <source media="(max-width:720px)" srcset="img/720x480.gif">
    <source media="(max-width:900px)" srcset="img/900x600.gif">
    <img src="img/900x600.gif"/>
    </picture>
  • img-srcset实现响应式图片

    1
    2
    3
    4
    5
    6
    <img sizes="(min-width:900px) 900px,100vw"
    srcset="img/480x320.gif 480w,
    img/640x427.gif 640w,
    img/720x480.gif 720w,
    img/900x600.gif 900w"
    src="img/480x320.gif"

CSS进阶

box-sizing

在用百分比布局时,加上边框会影响到整体布局。这时就可以用到box-sizing属性

  • content-box:这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
  • border-box:并排放置两个带边框的框,这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中
  • inherit:指定box-sizing属性的值,应该从父元素继承

弹性盒子布局

float属性会失效

display:flex;

设置弹性盒子,默认情况下,左对齐;不换行布局

flex-direction:

  • row:行,从左向右排列
  • row-reverse:行反方向,从右向左排列
  • column:列,从上至下
  • column-reverse:列反方向,从下至上

当外层盒子的宽度和高度不足以容纳内层布局时,内层的盒子会被压缩

换行

flex-warp:

  • nowarp:默认不换行
  • warp:换行
  • warp-reverse:反向换行

布局

justify-content-对齐方式

  • center:居中
  • flex-start:左对齐
  • flex-end:右对齐
  • space-around:环绕,左右/上下等比留白
  • space-between:相邻盒子之间等比留白

align-item-单行对齐方式

  • flex-start
  • center
  • flex-end

align-content-多行内容对齐方式

  • flex-start
  • center
  • flex-end

练习

垂直方向上居中布局

1
2
3
display: flex;
flex-direction: column;
align-items: center;

  • 当flex-direction:row

justify-content:center/space-round/space-between.居中为左右居中,留白部分是相对于行内列之间的留白。
GitHub set up
这时align-item:center是每行相对于上下的留白。即垂直居中
GitHub set up

  • 当flex-direction:column

justify-content:center/space-round/space-between.居中为上下居中,留白部分是相对于行与行之间的留白。
GitHub set up
GitHub set up
这时align-item:center是相对于左右的留白。即水平居中
GitHub set up