> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# rem 适配

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

```javascript title="样式适配"
!(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」

```javascript title="宽度自适应 - 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」

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

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

```javascript title="宽度自适应 - 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&点击事件&返回事件

```javascript title="代码示例"
(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 压缩版代码

```javascript title="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 title="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;
}
```

## 处理日期字符串

```javascript title="处理日期字符串"
function versionCode() {
    var dt = new Date(),
        y = dt.getFullYear(),
        m = dt.getMonth() + 1,
        d = dt.getDate();
    return (v = y + "." + m + "." + d);
}
```

## `<meta />` 标签移动端适配

```html title="移动端适配"
<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>
```