#rem 适配
#h5-rem.js 「压缩版」依据 750*750 设计稿
样式适配
!(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);#h5-rem 宽度自适应「方式 1」
宽度自适应 - 1
function add() {
var html = document.documentElement;
var hei = html.clientWidth;
var fz = (hei / 750) * 100 + "px";
html.style.fontSize = fz;
}
add();
window.addEventListener("resize", add, false);#h5-rem 自适应宽度「方式 2」
宽度自适应 - 2
function rem() {
document.documentElement.style.fontSize =
(document.documentElement.clientWidth / 750) * 100 + "px";
}
rem();
window.addEventListener("resize", rem, false);#h5-rem 自适应宽度「方式 3」
宽度自适应 - 3
!(function (n) {
var e = n.document,
t = e.documentElement,
i = 750,
d = i / 100,
o = "orientationchange" in n ? "orientationchange" : "resize",
a = function () {
var n = t.clientWidth || 320;
n > 750 && (n = 750);
t.style.fontSize = n / d + "px";
};
e.addEventListener &&
(n.addEventListener(o, a, !1),
e.addEventListener("DOMContentLoaded", a, !1));
})(window);#移动端 rem&点击事件&返回事件
代码示例
(function (w, t) {
/* 移动端适配方案 */
w.setFontSize = function () {
let width = document.documentElement.clientWidth / 16,
styleNode = document.createElement("style");
styleNode.innerHTML = "html{font-size:" + width + "px!important}";
document.head.appendChild(styleNode);
};
/* 返回 */
w.goBack = function () {
history.go(-1);
};
/* touchByM事件 */
t.fn.touchByM = function (callback) {
this.on("touchstart", function () {
this.isMove = false;
});
this.on("touchmove", function () {
if (!this.isMove) this.isMove = true;
});
this.on("touchend", function () {
if (this.isMove) return;
callback.call(this);
});
};
})(window, $);
setFontSize();#min 压缩版代码
js 压缩版
((function (a, b) {
((a.setFontSize = function () {
let a = document.documentElement.clientWidth / 16,
b = document.createElement("style");
((b.innerHTML = "html{font-size:" + a + "px!important}"),
document.head.appendChild(b));
}),
(a.goBack = function () {
history.go(-1);
}),
(b.fn.touchByM = function (a) {
(this.on("touchstart", function () {
this.isMove = !1;
}),
this.on("touchmove", function () {
this.isMove || (this.isMove = !0);
}),
this.on("touchend", function () {
this.isMove || a.call(this);
}));
}));
})(window, $),
setFontSize());#m-reset.css 压缩版代码
css 压缩版
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
}
button {
user-select: none;
}
img {
vertical-align: middle;
}
img:not([src]),
img[src=""] {
opacity: 0;
}
ul,
ol {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input,
select,
button,
textarea {
font-size: 100%;
font: inherit;
}
html,
body {
height: 100%;
overflow-x: hidden;
}#处理日期字符串
处理日期字符串
function versionCode() {
var dt = new Date(),
y = dt.getFullYear(),
m = dt.getMonth() + 1,
d = dt.getDate();
return (v = y + "." + m + "." + d);
}#<meta /> 标签移动端适配
移动端适配
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="telephone=no" name="format-detection" />
</head>