APP自适应的例子

程序员爱乐技术 2022年11月23日

0 收藏 784 点赞 4,010 浏览 1697 个字

<!DOCTYPE html>
<html lang="zh"><head>
    <meta charset="UTF-8">
    <title>rem phone test</title>
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        html {
            height: 100%;
            width: 100%;
            font-family: 'Heiti SC', 'Microsoft YaHei';
            font-size: 20px;
            overflow: hidden;
            outline: 0;
            -webkit-text-size-adjust:none;
        }
        body {
            height: 100%;
            margin: 0 auto;
            overflow: auto;
            -webkit-user-select: none;
            position: relative;
        }
        header,footer {
            width: 100%;
            line-height: 1.5rem;
            font-size: 1rem;
            color: #000;
            border: 1px solid #ccc;
            text-align: center;
            font-weight:bold;">#ccc;
        }
        .bd {
            margin-top: 1rem;
            margin-bottom: .5rem;
            margin-right: -.5rem;
            font-size: 0;
        }
        .box {
            width: 5rem;
            height: 5rem;
            display: inline-block;
            margin-right:0.5rem;
            margin-bottom:0.5rem;
        }
        .blue-box {
            font-weight:bold;
　　　　　　　background-color:red;
        }
        .org-box {
            font-weight:bold;
　　　　background-color:blue;
        }
    </style>
</head>
<body>
<header>我是头部</header>
<div class="bd">
    <div class="box blue-box"></div>
    <div class="box red-box"></div>
    <div class="box blue-box"></div>
    <div class="box red-box"></div>
    <div class="box blue-box"></div>
    <div class="box red-box"></div>
</div>
<footer>我是页脚</footer>
<script>
    (function (doc, win) {
        //获取根节点，将它赋值给一个变量
        var docEl = doc.documentElement,
                //利用三目运算来判断window中是否有这个事件，将它赋值给变量
                //orientationchange()是改变窗口的方向
                //resize()是计算窗口改变了多少次
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    //获取可视区域的宽度
                    var clientWidth = docEl.clientWidth;
                    //进行判断是否要执行下面的换算
                    if (!clientWidth){
                    //0 undefined "" 都会返回false
                        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>