手机端rem适配模板,js动态修改根节点字体大小 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>手机端rem适配模板</title>
    <script>
        (function (doc, win) {
            setRem();
            var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    setRem();
                };
            if (!doc.addEventListener)
                return;
            win.addEventListener(resizeEvt, recalc, false);
            // doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

        function setRem() {
            var docEl = document.documentElement;
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) {
                return;
            }
            docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
        }
    </script>
    <style>
        html {
            font-size: 20px;
            max-width: 640px;
            min-width: 375px;
        }

        body {
            padding: 0;
            margin: 0;
        }

        ul, li, ol, input {
            box-sizing: border-box;
        }

        input {
            outline: none;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .container {
            min-height: 100vh;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-align: center;
        }

        header {
            width: 100%;
        }

        .content {
            flex: 1;
            width: 100%;
        }

        footer {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <header>header</header>
    <div class="content">1</div>
    <footer>footer</footer>
</div>
<script type="text/javascript">//JS监听浏览器文字大小代码
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };


    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);
</script>
</body>
</html>
posted @ 2021-07-13 15:39  lambertlt  阅读(96)  评论(0)  编辑  收藏  举报