test.2x.css
8.17 KB
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
/* normal */
body {
background: #eee;
color: #888; /* color is gray */
border: 1px solid; /*no*/
height: 20px; /* px */
padding: 6px; /*px*/
-webkit-animation: anim1 linear infinite;
}
.header, .footer span {
width: 100%;
height: 20px;
margin: 10px;
font-size: 28px; /*px*/
animation: anim2 linear infinite;
}
.main {
height: 400px;
}
.sidebar {
margin: 0;
height: 0px;
line-height: 0px; /*px*/
width: 40px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
/* decimal */
padding: 24.5px 24px 0;
/* Data URI contains `px` */
background: 24px 12px url(data:image/png;base64,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);
}
@-webkit-keyframes anim1 {
0%, 100% {
-webkit-transform: none;
}
20%, 60% {
-webkit-transform: rotate(-45deg);
}
40%, 80% {
-webkit-transform: rotate(45deg);
}
}
@keyframes anim2 {
0% {
height: 75px; /*px*/
width: 75px;
border: 1px solid #ddd; /*no*/
}
100% {
height: 150px;
width: 150px;
border: 2px solid #ddd; /*no*/
}
}
/* media query */
@media only screen and (min-device-width: 241px) and (max-device-width: 360px) {
/* normal */
body {
background: #eee;
color: #888; /* color is gray */
border: 1px solid; /*no*/
height: 20px; /* px */
padding: 6px; /*px*/
-webkit-animation: anim3 linear infinite;
}
.header, .footer span {
width: 100%;
height: 20px;
margin: 10px;
font-size: 28px; /*px*/
animation: anim4 linear infinite;
}
.main {
height: 400px;
}
.sidebar {
margin: 0;
height: 0px;
line-height: 0px; /*px*/
width: 40px;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
/* decimal */
padding: 24.5px 24px 0;
/* Data URI contains `px` */
background: 24px 12px url(data:image/png;base64,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);
}
.footer {
height: 100px; /*px*/
}
@-webkit-keyframes anim3 {
0%, 100% {
-webkit-transform: none;
}
20%, 60% {
-webkit-transform: rotate(-45deg);
}
40%, 80% {
-webkit-transform: rotate(45deg);
}
}
@keyframes anim4 {
0% {
height: 75px;
width: 75px;
border: 1px solid #ddd; /*no*/
}
100% {
height: 150px;
width: 150px;
border: 2px solid #ddd; /*no*/
}
}
}
.footer {
height: 100px; /*px*/
}