手機端rem適配模板,js動態修改根節點字體大小

時間 2021-08-14

標籤 javascript html java 瀏覽器 ide 字體 flex spa scala 欄目 JavaScript 简体版

原文原文鏈接

手機端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>

有什麼不一樣看法能夠在評論區共同討論