# CSS一些布局案例

[toc]

# 1、大屏缩放布局

有时候做一些大屏看板，要求的是全屏1920*1080的设计，UI稿也是这个设计，那么就可以使用下下面的布局案例，在16:9的视口下，可以比较简单的做到响应式，当然缺点也是有的，如果有地图和点位需要交互的，点位可能不准。

配合常用CSS类名可以较快的实现案例编写。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .outer-main-wrapper {
            width: 100%;
            height: 100%;
            overflow: auto;
            position: relative;
        }

        .real-rect-wrapper {
            overflow: hidden;
            background-color: transparent;
            position: relative;
            z-index: 8;
        }



        .mian-content-wrapper {
            width: 1920px;
            height: 1080px;
            overflow: hidden;
            transform: scale(1);
            transform-origin: top left;
            position: relative;
        }

        .test-content {
            width: 1920px;
            height: 1080px;
            line-height: 1080px;
            text-align: center;
            font-size: 100px;
            background-image: linear-gradient(to bottom, green, cyan);

        }
    </style>
    <div class="outer-main-wrapper" id="OuterMainWrapper">
        <div class="real-rect-wrapper" id="RealRectWrapper">
            <div class="mian-content-wrapper" id="MianContentWrapper">
                <div class="test-content">测试内容</div>
            </div>
        </div>
    </div>
    <script>
        function initResize(minScale = 320 / 1920) {
            let _timer = null;
            const OuterMainWrapper = document.querySelector('#OuterMainWrapper');
            const RealRectWrapper = document.querySelector('#RealRectWrapper');
            const MianContentWrapper = document.querySelector('#MianContentWrapper');
            let _chartObserver

            try {
                if (ResizeObserver) {
                    _chartObserver = new ResizeObserver(resizeHandler);
                    _chartObserver.observe(OuterMainWrapper);
                }

                function resizeHandler(entries) {
                    if (_timer) {
                        clearTimeout(_timer);
                    }
                    _timer = setTimeout(() => {
                        const clientWidth = OuterMainWrapper.clientWidth;
                        let scale = clientWidth / 1920;
                        if (scale <= minScale) {
                            scale = minScale;
                        }
                        MianContentWrapper.style.transform = `scale(${scale})`;
                        RealRectWrapper.style.height = `${scale * 1080}px`;
                        RealRectWrapper.style.width = `${scale * 1920}px`;

                    }, 100);
                }
            } catch (error) {
                console.error(error);
            }
        }
        initResize()
    </script>
</body>

</html>

OuterMainWrapper是最外层的滚动容器，也可以把他设置为Body元素。RealRectWrapper是真实的宽高元素，主要用于撑开OuterMainWrapper。MianContentWrapper是实际的内容，宽高写死1920*1080，应用了缩放。后面所有的布局都可以写死宽高了。

← 常用CSS类名 CSS选择器详解 →