zoukankan      html  css  js  c++  java
  • 手机端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- 640px;
                min- 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;
                 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                text-align: center;
            }
    
            header {
                 100%;
            }
    
            .content {
                flex: 1;
                 100%;
            }
    
            footer {
                 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>
    
    
    有什么不同见解可以在评论区共同讨论
  • 相关阅读:
    三次请求(读-改-读)引出nibernate 一级缓存
    算法竞赛入门经典第一、二章摘记
    uva 10905 Children's Game
    uva 11205 The broken pedometer
    uva 10160 Servicing stations
    uva 208 Firetruck
    uva 167 The Sultan's Successors
    zoj 1016 Parencodings
    uva 307 Sticks
    uva 216 Getting in Line
  • 原文地址:https://www.cnblogs.com/lambertlt/p/15006696.html
Copyright © 2011-2022 走看看