ife-2016/8.html at master · Kido-200/ife-2016 · GitHub

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
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	<!-- 	<title>响应式网格（栅格化）布局</title>
		以 BootStrap 的网格系统为例，DOM 元素类名形如 col-md-4；其中 col 是“列” column 的缩写；
		md 是 medium 的缩写，适用于应屏幕宽度大于 768px 的场景；4 是占四栏的意思。
		因此，col-md-4 的意思是，在屏幕宽度大于 768px 时，该元素占四栏。
		xs表示超小屏幕，小于768px
		设一行的宽度为12 -->
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.row{
				display:flex;
				flex-wrap:wrap;
			}
			.col-md-1,
			.col-md-2,
			.col-md-3,
			.col-md-4,
			.col-md-6{
				box-sizing:border-box;/*这样border和padding就不会干扰到宽度了*/
				padding:10px;
			}
			.col-md-1{  /* 1/12 */
				width:8.333%;
			}
			.col-md-2{
				width:16.666%;
			}
			.col-md-3{
				width:25%;
			}
			.col-md-4{
				width:33.333%;
			}
			.col-md-6{
				width:50%;
			}
			[class*="content-"]{
				border:#999 1px solid;
				background-color:#eee;
				height:50px;
				box-sizing:border-box;
				padding: 10px;
			}

			/*开始写响应式布局*/
			@media only screen and (max-width:768px){
				.col-xs-12{
					width:100%;
				}
				.col-xs-2{
					width:16.666%;
				}
				.col-xs-3{
					width:25%;
				}
				.col-xs-6{
					width:50%;
				}
				.col-xs-8{
					width:66.666%;
				}
			}
		</style>

	</head>
	<body>
		<class class="row">
			<div class="col-md-4 col-xs-6">
			    <div class="content-first"></div><!-- 以后肯定是把内容放在这个div里的，模拟一下 -->
			</div>
			<div class="col-md-4 col-xs-6">
				<div class="content-first"></div>
			</div>
			<div class="col-md-4 col-xs-12">
				<div class="content-first"></div>
			</div>
		</class>
		<class class="row">
			<div class="col-md-3 col-xs-3">
				<div class="content-second"></div>
			</div>
			<div class="col-md-6 col-xs-6">
				<div class="content-second"></div>
			</div>
			<div class="col-md-3 col-xs-3">
				<div class="content-second"></div>
			</div>
		</class>
		<class class="row">
			<class class="col-md-1 col-xs-2">
				<div class="content-third"></div>
			</class>
			<class class="col-md-1 col-xs-2">
				<div class="content-third"></div>
			</class>
			<class class="col-md-2 col-xs-8">
				<div class="content-third"></div>
			</class>
			<!-- 这里已经12了，下面会换行 -->
			<class class="col-md-2 col-xs-3">
				<div class="content-third"></div>
			</class>
			<class class="col-md-6 col-xs-3">
				<div class="content-third"></div>
			</class>
		</class>
	</body>
</html>