#移动端初始化模板
#方案一
flexible.js（原版）
代码示例
// designWidth:设计稿的实际宽度值，需要根据实际设置
// maxWidth:制作稿的最大宽度值，需要根据实际设置
// 这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
(function (designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width > maxWidth && (width = maxWidth);
var rem = (width * 100) / designWidth;
remStyle.innerHTML = "html{font-size:" + rem + "px;}";
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener(
"resize",
function () {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
},
false
);
win.addEventListener(
"pageshow",
function (e) {
if (e.persisted) {
// 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
},
false
);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener(
"DOMContentLoaded",
function (e) {
doc.body.style.fontSize = "16px";
},
false
);
}
})(750, 750);#方案二
flexible.min.js（压缩版）
代码示例
(function (a, b) {
function c() {
var c = g.getBoundingClientRect().width;
((b = b || 540), c > b && (c = b));
var d = (100 * c) / a;
h.innerHTML = "html{font-size:" + d + "px;}";
}
var d,
e = document,
f = window,
g = e.documentElement,
h = document.createElement("style");
if (g.firstElementChild) g.firstElementChild.appendChild(h);
else {
var i = e.createElement("div");
(i.appendChild(h), e.write(i.innerHTML), (i = null));
}
(c(),
f.addEventListener(
"resize",
function () {
(clearTimeout(d), (d = setTimeout(c, 300)));
},
!1
),
f.addEventListener(
"pageshow",
function (a) {
a.persisted && (clearTimeout(d), (d = setTimeout(c, 300)));
},
!1
),
"complete" === e.readyState
? (e.body.style.fontSize = "16px")
: e.addEventListener(
"DOMContentLoaded",
function () {
e.body.style.fontSize = "16px";
},
!1
));
})(750, 750);#重置样式
base.css
代码示例
body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
input,
textarea,
p,
hr,
thead,
tbody,
tfoot,
th,
td {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
body {
line-height: 1.5;
font-size: 14px;
}
body,
button,
input,
select,
textarea {
font-family:
"helvetica neue", tahoma, "hiragino sans gb", stheiti,
"wenquanyi micro hei", \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;
}
b,
strong {
font-weight: bold;
}
i,
em {
font-style: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table th,
table td {
border: 1px solid #ddd;
padding: 5px;
}
table th {
font-weight: inherit;
border-bottom-width: 2px;
border-bottom-color: #ccc;
}
img {
border: 0 none;
width: auto\9;
max-width: 100%;
vertical-align: top;
height: auto;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
vertical-align: baseline;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
input:focus {
outline: none;
}
select[size],
select[multiple],
select[size][multiple] {
border: 1px solid #aaa;
padding: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video,
progress {
display: inline-block;
}
body {
background: #fff;
}
input::-webkit-input-speech-button {
display: none;
}
button,
input,
textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}#页面布局
html 模板
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
name="viewport"
/>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<meta name="description" content="不超过150个字符" />
<meta name="keywords" content="" />
<meta content="caibaojian" name="author" />
<title>前端开发博客</title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript">
//引入该flexible.min.js
!(function (e, t) {
function n() {
var n = l.getBoundingClientRect().width;
((t = t || 540), n > t && (n = t));
var i = (100 * n) / e;
r.innerHTML = "html{font-size:" + i + "px;}";
}
var i,
d = document,
o = window,
l = d.documentElement,
r = document.createElement("style");
if (l.firstElementChild) l.firstElementChild.appendChild(r);
else {
var a = d.createElement("div");
(a.appendChild(r), d.write(a.innerHTML), (a = null));
}
(n(),
o.addEventListener(
"resize",
function () {
(clearTimeout(i), (i = setTimeout(n, 300)));
},
!1
),
o.addEventListener(
"pageshow",
function (e) {
e.persisted &&
(clearTimeout(i), (i = setTimeout(n, 300)));
},
!1
),
"complete" === d.readyState
? (d.body.style.fontSize = "16px")
: d.addEventListener(
"DOMContentLoaded",
function (e) {
d.body.style.fontSize = "16px";
},
!1
));
})(750, 750);
</script>
</head>
<body>
<!-- 正文 -->
</body>
</html>