Skip to content

Commit f8721e3

Browse files
xjchenhaoxjchenhao
committed
第四种自适应布局的方式
1 parent bfb1728 commit f8721e3

File tree

3 files changed

+502
-0
lines changed

3 files changed

+502
-0
lines changed

‎mobileAdaptive/04/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
6+
<title>直接计算改变html字号</title>
7+
<link rel="stylesheet" href="style.css"/>
8+
<style id="_zoom"></style>
9+
</head>
10+
<body class="zoom">
11+
<div class="viewport">
12+
<div class="top-card">
13+
<div class="main">
14+
<div class="rate">
15+
<div class="tit">年化收益</div>
16+
<div class="cont">10.88
17+
<small>%</small>
18+
</div>
19+
</div>
20+
<div class="rule">期限<b>90</b>天<span class="divide">|</span><b>1000</b>元起购</div>
21+
</div>
22+
<div class="other ing">
23+
<div class="info">总金额<b id="totalAmount" data-val="5000000.00">500,000.00</b>元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开售时间：<b>明天10:00</b>
24+
</div>
25+
<div class="progress"><em><i style="width: 50%"></i></em></div>
26+
</div>
27+
</div>
28+
</div>
29+
<script>
30+
(function(){
31+
function o(){document.documentElement.style.fontSize=(document.documentElement.clientWidth>414?414:document.documentElement.clientWidth)/12+"px"}
32+
var e=null;
33+
window.addEventListener("resize",function(){clearTimeout(e),e=setTimeout(o,300)},!1),o()
34+
})(window);
35+
</script>
36+
</body>
37+
</html>

‎mobileAdaptive/04/style.css

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
html,
2+
body,
3+
div,
4+
span,
5+
applet,
6+
object,
7+
iframe,
8+
h1,
9+
h2,
10+
h3,
11+
h4,
12+
h5,
13+
h6,
14+
p,
15+
blockquote,
16+
pre,
17+
a,
18+
abbr,
19+
acronym,
20+
address,
21+
big,
22+
cite,
23+
code,
24+
del,
25+
dfn,
26+
em,
27+
img,
28+
ins,
29+
kbd,
30+
q,
31+
s,
32+
samp,
33+
small,
34+
strike,
35+
strong,
36+
sub,
37+
sup,
38+
tt,
39+
var,
40+
dl,
41+
dt,
42+
dd,
43+
ol,
44+
ul,
45+
li,
46+
fieldset,
47+
form,
48+
label,
49+
legend,
50+
table,
51+
caption,
52+
tbody,
53+
tfoot,
54+
thead,
55+
tr,
56+
th,
57+
td {
58+
padding: 0;
59+
margin: 0;
60+
border: 0;
61+
outline: 0;
62+
font-weight: inherit;
63+
font-style: inherit;
64+
font-family: inherit;
65+
font-size: 100%;
66+
vertical-align: baseline;
67+
}
68+
body {
69+
line-height: 1;
70+
}
71+
ol,
72+
ul {
73+
list-style: none;
74+
}
75+
table {
76+
border-collapse: separate;
77+
border-spacing: 0;
78+
vertical-align: middle;
79+
}
80+
caption,
81+
th,
82+
td {
83+
text-align: left;
84+
font-weight: normal;
85+
vertical-align: middle;
86+
}
87+
a img {
88+
border: none;
89+
}
90+
article,
91+
aside,
92+
details,
93+
figcaption,
94+
figure,
95+
footer,
96+
header,
97+
hgroup,
98+
menu,
99+
nav,
100+
section,
101+
summary,
102+
main {
103+
display: block;
104+
padding: 0;
105+
margin: 0;
106+
border: 0;
107+
outline: 0;
108+
font-weight: inherit;
109+
font-style: inherit;
110+
font-family: inherit;
111+
font-size: 100%;
112+
vertical-align: baseline;
113+
}
114+
audio,
115+
canvas,
116+
video {
117+
display: inline-block;
118+
*display: inline;
119+
*zoom: 1;
120+
}
121+
audio:not([controls]),
122+
[hidden] {
123+
display: none;
124+
}
125+
a {
126+
color: inherit;
127+
text-decoration: inherit;
128+
cursor: inherit;
129+
-webkit-tap-highlight-color: transparent;
130+
}
131+
a:active,
132+
a:focus {
133+
outline: none;
134+
}
135+
input,
136+
textarea {
137+
outline: none;
138+
-webkit-tap-highlight-color: transparent;
139+
}
140+
body {
141+
font-family: 'Helvetica Neue', Arial, sans-serif;
142+
-webkit-user-select: none;
143+
background-color: #f2f2f2;
144+
}
145+
.viewport {
146+
margin: 0 auto;
147+
position: relative;
148+
}
149+
.top-card {
150+
text-align: center;
151+
background-color: #f64349;
152+
overflow: hidden;
153+
}
154+
.top-card .main {
155+
margin-top: 0.431519699812383rem;
156+
line-height: 1;
157+
}
158+
.top-card .main .rate .tit {
159+
font-size: 0.525328330206379rem;
160+
color: #fcc;
161+
}
162+
.top-card .main .rate .cont {
163+
margin-top: 0.187617260787993rem;
164+
font-size: 1.876172607879925rem;
165+
color: #fff;
166+
}
167+
.top-card .main .rate .cont small {
168+
font-size: 1.125703564727955rem;
169+
}
170+
.top-card .main .rule {
171+
margin-top: 0.469043151969981rem;
172+
font-size: 0.562851782363977rem;
173+
color: #fcc;
174+
}
175+
.top-card .main .rule .divide {
176+
padding: 0rem 0.469043151969981rem;
177+
}
178+
.top-card .main .rule b {
179+
color: #fff;
180+
padding: 0rem 0.187617260787993rem;
181+
}
182+
.top-card .other {
183+
margin-top: 0.656660412757974rem;
184+
}
185+
.top-card .other .info {
186+
height: 1.50093808630394rem;
187+
font-size: 0.450281425891182rem;
188+
line-height: 1.50093808630394rem;
189+
background-color: #f65e63;
190+
color: #febdbd;
191+
}
192+
.top-card .other .info b {
193+
color: #fff;
194+
padding: 0rem 0.187617260787993rem;
195+
}
196+
.top-card .other .progress {
197+
display: none;
198+
}
199+
.top-card .other.ing .info {
200+
background-color: transparent;
201+
}
202+
.top-card .other.ing .progress {
203+
position: absolute;
204+
margin-top: -1.50093808630394rem;
205+
width: 100%;
206+
text-align: center;
207+
display: block;
208+
font-size: 0;
209+
}
210+
.top-card .other.ing .progress em {
211+
position: relative;
212+
display: inline-block;
213+
width: 10.131332082551594rem;
214+
height: 0.112570356472796rem;
215+
background-color: #fff;
216+
border-radius: 0.093808630393996rem;
217+
}
218+
.top-card .other.ing .progress em i {
219+
position: absolute;
220+
left: 0;
221+
top: 0;
222+
display: inline-block;
223+
width: 0%;
224+
height: 0.112570356472796rem;
225+
background-color: #ff9;
226+
border-radius: 0.093808630393996rem;
227+
}

0 commit comments

Comments
 (0)