default.rem.css
9.1 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
/* normal */
body {
background: #eee;
color: #888;
/* color is gray */
border: 1px solid;
-webkit-animation: anim1 linear infinite;
}
[data-dpr="1"] body {
height: 10px;
padding: 3px;
}
[data-dpr="2"] body {
height: 20px;
padding: 6px;
}
[data-dpr="3"] body {
height: 30px;
padding: 9px;
}
.header,
.footer span {
width: 100%;
height: 0.266667rem;
margin: 0.133333rem;
animation: anim2 linear infinite;
}
[data-dpr="1"] .header,
[data-dpr="1"] .footer span {
font-size: 14px;
}
[data-dpr="2"] .header,
[data-dpr="2"] .footer span {
font-size: 28px;
}
[data-dpr="3"] .header,
[data-dpr="3"] .footer span {
font-size: 42px;
}
.main {
height: 5.333333rem;
}
.sidebar {
margin: 0;
height: 0;
line-height: 0;
width: 0.533333rem;
-webkit-box-shadow: 0 0.026667rem 0.026667rem rgba(0, 0, 0, 0.12);
/* decimal */
padding: 0.326667rem 0.32rem 0;
/* Data URI contains `px` */
background: 0.32rem 0.16rem 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: 1rem;
width: 1rem;
border: 1px solid #ddd;
}
100% {
height: 2rem;
width: 2rem;
border: 2px solid #ddd;
}
}
/* 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;
-webkit-animation: anim3 linear infinite;
}
[data-dpr="1"] body {
height: 10px;
padding: 3px;
}
[data-dpr="2"] body {
height: 20px;
padding: 6px;
}
[data-dpr="3"] body {
height: 30px;
padding: 9px;
}
.header,
.footer span {
width: 100%;
height: 0.266667rem;
margin: 0.133333rem;
animation: anim4 linear infinite;
}
[data-dpr="1"] .header,
[data-dpr="1"] .footer span {
font-size: 14px;
}
[data-dpr="2"] .header,
[data-dpr="2"] .footer span {
font-size: 28px;
}
[data-dpr="3"] .header,
[data-dpr="3"] .footer span {
font-size: 42px;
}
.main {
height: 5.333333rem;
}
.sidebar {
margin: 0;
height: 0;
line-height: 0;
width: 0.533333rem;
-webkit-box-shadow: 0 0.026667rem 0.026667rem rgba(0, 0, 0, 0.12);
/* decimal */
padding: 0.326667rem 0.32rem 0;
/* Data URI contains `px` */
background: 0.32rem 0.16rem url(data:image/png;base64,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);
}
[data-dpr="1"] .footer {
height: 50px;
}
[data-dpr="2"] .footer {
height: 100px;
}
[data-dpr="3"] .footer {
height: 150px;
}
@-webkit-keyframes anim3 {
0%, 100% {
-webkit-transform: none;
}
20%, 60% {
-webkit-transform: rotate(-45deg);
}
40%, 80% {
-webkit-transform: rotate(45deg);
}
}
@keyframes anim4 {
0% {
height: 1rem;
width: 1rem;
border: 1px solid #ddd;
}
100% {
height: 2rem;
width: 2rem;
border: 2px solid #ddd;
}
}
}
[data-dpr="1"] .footer {
height: 50px;
}
[data-dpr="2"] .footer {
height: 100px;
}
[data-dpr="3"] .footer {
height: 150px;
}