REM 布局适配

预计阅读时间: 小于 1 分钟

h5-rem.js 「压缩版」依据  750*750  设计稿

样式适配
1!(function (e, t) {
2	function n() {
3		var n = l.getBoundingClientRect().width;
4		(t = t || 540), n > t && (n = t);
5		var i = (100 * n) / e;
6		r.innerHTML = "html{font-size:" + i + "px;}";
7	}
8	var i,
9		d = document,
10		o = window,
11		l = d.documentElement,
12		r = document.createElement("style");
13	if (l.firstElementChild) l.firstElementChild.appendChild(r);
14	else {
15		var a = d.createElement("div");
16		a.appendChild(r), d.write(a.innerHTML), (a = null);
17	}
18	n(),
19		o.addEventListener(
20			"resize",
21			function () {
22				clearTimeout(i), (i = setTimeout(n, 300));
23			},
24			!1
25		),
26		o.addEventListener(
27			"pageshow",
28			function (e) {
29				e.persisted && (clearTimeout(i), (i = setTimeout(n, 300)));
30			},
31			!1
32		),
33		"complete" === d.readyState
34			? (d.body.style.fontSize = "16px")
35			: d.addEventListener(
36					"DOMContentLoaded",
37					function (e) {
38						d.body.style.fontSize = "16px";
39					},
40					!1
41			  );
42})(750, 750);

h5-rem 宽度自适应「方式 1」

宽度自适应 - 1
1function add() {
2	var html = document.documentElement;
3	var hei = html.clientWidth;
4	var fz = (hei / 750) * 100 + "px";
5	html.style.fontSize = fz;
6}
7add();
8window.addEventListener("resize", add, false);

h5-rem 自适应宽度「方式 2」

宽度自适应 - 2
1function rem() {
2	document.documentElement.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + "px";
3}
4rem();
5window.addEventListener("resize", rem, false);

h5-rem 自适应宽度「方式 3」

宽度自适应 - 3
1!(function (n) {
2	var e = n.document,
3		t = e.documentElement,
4		i = 750,
5		d = i / 100,
6		o = "orientationchange" in n ? "orientationchange" : "resize",
7		a = function () {
8			var n = t.clientWidth || 320;
9			n > 750 && (n = 750);
10			t.style.fontSize = n / d + "px";
11		};
12	e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1));
13})(window);

移动端 rem&点击事件&返回事件

代码案例
1(function (w, t) {
2	/* 移动端适配方案 */
3	w.setFontSize = function () {
4		let width = document.documentElement.clientWidth / 16,
5			styleNode = document.createElement("style");
6		styleNode.innerHTML = "html{font-size:" + width + "px!important}";
7		document.head.appendChild(styleNode);
8	};
9	/* 返回 */
10	w.goBack = function () {
11		history.go(-1);
12	};
13	/* touchByM事件 */
14	t.fn.touchByM = function (callback) {
15		this.on("touchstart", function () {
16			this.isMove = false;
17		});
18		this.on("touchmove", function () {
19			if (!this.isMove) this.isMove = true;
20		});
21		this.on("touchend", function () {
22			if (this.isMove) return;
23			callback.call(this);
24		});
25	};
26})(window, $);
27setFontSize();

min 压缩版代码

js 压缩版
1(function (a, b) {
2	(a.setFontSize = function () {
3		let a = document.documentElement.clientWidth / 16,
4			b = document.createElement("style");
5		(b.innerHTML = "html{font-size:" + a + "px!important}"), document.head.appendChild(b);
6	}),
7		(a.goBack = function () {
8			history.go(-1);
9		}),
10		(b.fn.touchByM = function (a) {
11			this.on("touchstart", function () {
12				this.isMove = !1;
13			}),
14				this.on("touchmove", function () {
15					this.isMove || (this.isMove = !0);
16				}),
17				this.on("touchend", function () {
18					this.isMove || a.call(this);
19				});
20		});
21})(window, $),
22	setFontSize();

m-reset.css 压缩版代码

css 压缩版
1* {
2	box-sizing: border-box;
3	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
4}
5body,
6dl,
7dt,
8dd,
9ul,
10ol,
11li,
12h1,
13h2,
14h3,
15h4,
16h5,
17h6,
18pre,
19code,
20form,
21fieldset,
22legend,
23input,
24textarea,
25p,
26blockquote,
27th,
28td,
29hr,
30button,
31article,
32aside,
33details,
34figcaption,
35figure,
36footer,
37header,
38menu,
39nav,
40section {
41	margin: 0;
42	padding: 0;
43	border: 0;
44}
45a {
46	text-decoration: none;
47}
48button {
49	user-select: none;
50}
51img {
52	vertical-align: middle;
53}
54img:not([src]),
55img[src=""] {
56	opacity: 0;
57}
58ul,
59ol {
60	list-style: none;
61}
62table {
63	border-collapse: collapse;
64	border-spacing: 0;
65}
66input,
67select,
68button,
69textarea {
70	font-size: 100%;
71	font: inherit;
72}
73html,
74body {
75	height: 100%;
76	overflow-x: hidden;
77}

处理日期字符串

处理日期字符串
1function versionCode() {
2	var dt = new Date(),
3		y = dt.getFullYear(),
4		m = dt.getMonth() + 1,
5		d = dt.getDate();
6	return (v = y + "." + m + "." + d);
7}

<meta /> 标签移动端适配

移动端适配
1<head>
2	<meta charset="utf-8" />
3	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
4	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
5	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6	<meta content="yes" name="apple-mobile-web-app-capable" />
7	<meta content="telephone=no" name="format-detection" />
8</head>