写一个类似于聊天得滚动页面得自适应布局

最新推荐文章于 2024-04-30 17:17:12 发布

岁月如歌_

最新推荐文章于 2024-04-30 17:17:12 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/namechenfl/article/details/108625976

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .page{
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .scroll-box{
            height: 100%;
            overflow-y: auto;
        }
        .header{
            height: .8rem;
            background: #ffffff;
        }
        .footer{
            height: .8rem;
            background: #ffffff;
        }
        body,html{
            background: #f1f1f1;
            height: 100%;
        }
    </style>
        <script>
            (function (doc, win) {
                var docEl = doc.documentElement,
                    isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                    dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
                    dpr = 1,
                    scale = 1 / dpr,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
                docEl.dataset.dpr = dpr;
                var metaEl = doc.createElement('meta');
                metaEl.name = 'viewport';
                metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
                docEl.firstElementChild.appendChild(metaEl);
                var recalc = function () {
                    var width = docEl.clientWidth;
                    if (width / dpr > 750) {
                        width = 750 * dpr;
                    }
                    // 乘以100，px : rem = 100 : 1
                    docEl.style.fontSize = 100 * (width / 750) + 'px';
                };
                recalc()
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
            })(document, window);
        </script>
</head>
<body>
    <div class="page">
        <div class="header"></div>
        <div class="scroll-box">
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
            <p>33333</p>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

效果