中软大前端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