-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss_var_media_query_layout.html
127 lines (127 loc) · 3.35 KB
/
css_var_media_query_layout.html
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
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
.main{
width: 80%;
min-width: 320px;
margin: auto;
overflow: hidden;
font-family: Source Code Pro,Microsoft YaHei;
}
.main{
--col:4;
--mar:calc(24px / var(--col));
--pad:calc(4px * var(--col));
--fSize:calc(20px - 4 / var(--col));
}
h2{
margin: 5px;
}
.cell{
text-align: center;
}
@media screen and (max-width:1200px){
.main{
--col:3;
}
}
@media screen and (max-width:900px){
.main{
--col:2;
}
}
@media screen and (max-width:600px){
.main{
--col:1;
}
}
.cell{
width:calc((100%- var(--mar)*var(--col)*2)/var(--col));/* 注意calc()内部变量var与减号之间要有空格*/
margin:var(--mar);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
background-color: #f0f3f9;
float: left;
}
.chead{
background: currentColor;
}
.ctitle{
color:#fff;
padding: var(--pad);
font-size: var(--fSize);
}
.content{
padding:var(--pad);
font-size: var(--fSize);
height: 30px;
}
</style>
<title>zhangqi_file</title>
</head>
<body>
<div class="main">
<h2>这是CSS3变量配合CSS3函数calc()实现响应式布局实例</h2>
<div class="cell" style="color:#758a99">
<div class="chead">
<div class="ctitle">墨灰</div>
</div>
<div class="content">我是个对自己颜值很自信的人，每天叫醒我起床的不是闹钟</div>
<img src="images/17.png">
</div>
<div class="cell" style="color:#789262">
<div class="chead">
<div class="ctitle">竹青</div>
</div>
<div class="content">也不是梦想，而是自己的颜值</div>
<img src="images/12.png">
</div>
<div class="cell" style="color:#549688">
<div class="chead">
<div class="ctitle">铜绿</div>
</div>
<div class="content">每每想到我长得如此俊俏，都会从梦中笑醒</div>
<img src="images/9.png">
</div>
<div class="cell" style="color:#b0a4e3">
<div class="chead">
<div class="ctitle">雪青</div>
</div>
<div class="content">但是，人在江湖飘，哪有不挨刀</div>
<img src="images/1.png">
</div>
<div class="cell" style="color:#425066">
<div class="chead">
<div class="ctitle">黛蓝</div>
</div>
<div class="content">经常出入一些社交场合，难免和和其他的人和物一起照个相什么的</div>
<img src="images/18.png">
</div>
<div class="cell" style="color:#9b4400">
<div class="chead">
<div class="ctitle">棕红</div>
</div>
<div class="content">如果和我合影的是迪丽热巴这样的美女也就算了</div>
<img src="images/10.png">
</div>
<div class="cell" style="color:#494931">
<div class="chead">
<div class="ctitle">缁色</div>
</div>
<div class="content">但经常在我左右的都是大老爷们</div>
<img src="images/13.png">
</div>
<div class="cell" style="color:#f00056">
<div class="chead">
<div class="ctitle">品红</div>
</div>
<div class="content">有时候，甚至还有其他完全不知形象为何物的汪科物种</div>
<img src="images/14.png">
</div>
</div>
</body>
<script></script>
</html>