#移动端初始化模板
预计阅读时间: 小于 1 分钟#方案一
flexible.js（原版）
代码示例
1// designWidth:设计稿的实际宽度值，需要根据实际设置
2// maxWidth:制作稿的最大宽度值，需要根据实际设置
3// 这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
4(function (designWidth, maxWidth) {
5 var doc = document,
6 win = window,
7 docEl = doc.documentElement,
8 remStyle = document.createElement("style"),
9 tid;
10
11 function refreshRem() {
12 var width = docEl.getBoundingClientRect().width;
13 maxWidth = maxWidth || 540;
14 width > maxWidth && (width = maxWidth);
15 var rem = (width * 100) / designWidth;
16 remStyle.innerHTML = "html{font-size:" + rem + "px;}";
17 }
18
19 if (docEl.firstElementChild) {
20 docEl.firstElementChild.appendChild(remStyle);
21 } else {
22 var wrap = doc.createElement("div");
23 wrap.appendChild(remStyle);
24 doc.write(wrap.innerHTML);
25 wrap = null;
26 }
27 //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
28 refreshRem();
29
30 win.addEventListener(
31 "resize",
32 function () {
33 clearTimeout(tid); //防止执行两次
34 tid = setTimeout(refreshRem, 300);
35 },
36 false
37 );
38
39 win.addEventListener(
40 "pageshow",
41 function (e) {
42 if (e.persisted) {
43 // 浏览器后退的时候重新计算
44 clearTimeout(tid);
45 tid = setTimeout(refreshRem, 300);
46 }
47 },
48 false
49 );
50
51 if (doc.readyState === "complete") {
52 doc.body.style.fontSize = "16px";
53 } else {
54 doc.addEventListener(
55 "DOMContentLoaded",
56 function (e) {
57 doc.body.style.fontSize = "16px";
58 },
59 false
60 );
61 }
62})(750, 750);#方案二
flexible.min.js（压缩版）
代码示例
1(function (a, b) {
2 function c() {
3 var c = g.getBoundingClientRect().width;
4 (b = b || 540), c > b && (c = b);
5 var d = (100 * c) / a;
6 h.innerHTML = "html{font-size:" + d + "px;}";
7 }
8 var d,
9 e = document,
10 f = window,
11 g = e.documentElement,
12 h = document.createElement("style");
13 if (g.firstElementChild) g.firstElementChild.appendChild(h);
14 else {
15 var i = e.createElement("div");
16 i.appendChild(h), e.write(i.innerHTML), (i = null);
17 }
18 c(),
19 f.addEventListener(
20 "resize",
21 function () {
22 clearTimeout(d), (d = setTimeout(c, 300));
23 },
24 !1
25 ),
26 f.addEventListener(
27 "pageshow",
28 function (a) {
29 a.persisted && (clearTimeout(d), (d = setTimeout(c, 300)));
30 },
31 !1
32 ),
33 "complete" === e.readyState
34 ? (e.body.style.fontSize = "16px")
35 : e.addEventListener(
36 "DOMContentLoaded",
37 function () {
38 e.body.style.fontSize = "16px";
39 },
40 !1
41 );
42})(750, 750);#重置样式
base.css
代码示例
1body,
2dl,
3dd,
4ul,
5ol,
6h1,
7h2,
8h3,
9h4,
10h5,
11h6,
12pre,
13form,
14input,
15textarea,
16p,
17hr,
18thead,
19tbody,
20tfoot,
21th,
22td {
23 margin: 0;
24 padding: 0;
25}
26
27ul,
28ol {
29 list-style: none;
30}
31
32a {
33 text-decoration: none;
34}
35
36html {
37 -ms-text-size-adjust: none;
38 -webkit-text-size-adjust: none;
39 text-size-adjust: none;
40}
41
42body {
43 line-height: 1.5;
44 font-size: 14px;
45}
46
47body,
48button,
49input,
50select,
51textarea {
52 font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;
53}
54
55b,
56strong {
57 font-weight: bold;
58}
59
60i,
61em {
62 font-style: normal;
63}
64
65table {
66 border-collapse: collapse;
67 border-spacing: 0;
68}
69
70table th,
71table td {
72 border: 1px solid #ddd;
73 padding: 5px;
74}
75
76table th {
77 font-weight: inherit;
78 border-bottom-width: 2px;
79 border-bottom-color: #ccc;
80}
81
82img {
83 border: 0 none;
84 width: auto\9;
85 max-width: 100%;
86 vertical-align: top;
87 height: auto;
88}
89
90button,
91input,
92select,
93textarea {
94 font-family: inherit;
95 font-size: 100%;
96 margin: 0;
97 vertical-align: baseline;
98}
99
100button,
101html input[type="button"],
102input[type="reset"],
103input[type="submit"] {
104 -webkit-appearance: button;
105 cursor: pointer;
106}
107
108button[disabled],
109input[disabled] {
110 cursor: default;
111}
112
113input[type="checkbox"],
114input[type="radio"] {
115 box-sizing: border-box;
116 padding: 0;
117}
118
119input[type="search"] {
120 -webkit-appearance: textfield;
121 -moz-box-sizing: content-box;
122 -webkit-box-sizing: content-box;
123 box-sizing: content-box;
124}
125
126input[type="search"]::-webkit-search-decoration {
127 -webkit-appearance: none;
128}
129
130input:focus {
131 outline: none;
132}
133
134select[size],
135select[multiple],
136select[size][multiple] {
137 border: 1px solid #aaa;
138 padding: 0;
139}
140
141article,
142aside,
143details,
144figcaption,
145figure,
146footer,
147header,
148hgroup,
149main,
150nav,
151section,
152summary {
153 display: block;
154}
155
156audio,
157canvas,
158video,
159progress {
160 display: inline-block;
161}
162
163body {
164 background: #fff;
165}
166
167input::-webkit-input-speech-button {
168 display: none;
169}
170
171button,
172input,
173textarea {
174 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
175}#页面布局
html 模板
代码示例
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
6 <meta content="yes" name="apple-mobile-web-app-capable" />
7 <meta content="black" name="apple-mobile-web-app-status-bar-style" />
8 <meta content="telephone=no" name="format-detection" />
9 <meta content="email=no" name="format-detection" />
10 <meta name="description" content="不超过150个字符" />
11 <meta name="keywords" content="" />
12 <meta content="caibaojian" name="author" />
13 <title>前端开发博客</title>
14 <link rel="stylesheet" href="base.css" />
15 <script type="text/javascript">
16 //引入该flexible.min.js
17 !(function (e, t) {
18 function n() {
19 var n = l.getBoundingClientRect().width;
20 (t = t || 540), n > t && (n = t);
21 var i = (100 * n) / e;
22 r.innerHTML = "html{font-size:" + i + "px;}";
23 }
24 var i,
25 d = document,
26 o = window,
27 l = d.documentElement,
28 r = document.createElement("style");
29 if (l.firstElementChild) l.firstElementChild.appendChild(r);
30 else {
31 var a = d.createElement("div");
32 a.appendChild(r), d.write(a.innerHTML), (a = null);
33 }
34 n(),
35 o.addEventListener(
36 "resize",
37 function () {
38 clearTimeout(i), (i = setTimeout(n, 300));
39 },
40 !1
41 ),
42 o.addEventListener(
43 "pageshow",
44 function (e) {
45 e.persisted && (clearTimeout(i), (i = setTimeout(n, 300)));
46 },
47 !1
48 ),
49 "complete" === d.readyState
50 ? (d.body.style.fontSize = "16px")
51 : d.addEventListener(
52 "DOMContentLoaded",
53 function (e) {
54 d.body.style.fontSize = "16px";
55 },
56 !1
57 );
58 })(750, 750);
59 </script>
60 </head>
61
62 <body>
63 <!-- 正文 -->
64 </body>
65</html>目 录