div元素自适应屏幕大小-526互联

简单介绍一下实现方式（结尾处有代码）

1.首先创建一个根元素，将这个跟元素宽高设置为100%，当然，用100vw、100vh也可以，并且将根元素设置为相对定位。

2.再创建我们要实现自适应大小的元素，自适应元素我们要给固定的宽高。可以按照常见的屏幕分辨率赋值，1920*1080或者2560*1440。（注：至于为什么要写死，因为自适应是通过css的scale实现的）

3.自适应元素的定位要设置成绝对定位。（为了让自适应元素始终在根元素中水平、垂直都保持居中状态）

4.在js代码中，首先获取根元素与自适应元素的高比例，和宽比例，我们将按照这个比例缩放自适应元素。再获取到根元素自身的宽高比例，已经自适应元素的宽高比例，因为我们要根据他们各自的比例来决定我们最终使用高比例缩放还是宽比例缩放。

5.当自适应元素开始缩放时，要记得设置这个css属性：ransform-origin = 0px 0px;

6.因为我们使用了绝对定位的方式让自适应元素居中，随着根元素的改变，我们的margin值也要动态改变。所以在JS中需要计算出margin值。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .screen-wrapper {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            position: relative;
            background-color: #000;
        }

        .screen {
            height: 1440px;
            width: 2560px;
            background-image: url('./wallpaper.jpg');
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            top: 50%;
        }

        .main {
            height: 200px;
            margin: 200px;
        }

        .title1 {
            font-size: 28px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="screen-wrapper" class="screen-wrapper">
        <div id="screen" class="screen">
            <div class="main">
                <span class="title1">人言落日是天涯，望极天涯不见家。</span>
            </div>
        </div>
    </div>

    <script>
        const container = document.getElementById("screen-wrapper");
        const screen = document.getElementById("screen");
        const mainH = screen.offsetHeight;
        const mainW = screen.offsetWidth;

        resetScreen();

        window.addEventListener("resize", function (event) {
            resetScreen();
        })

        function resetScreen() {
            const cw = container.offsetWidth;
            const ch = container.offsetHeight;

            const cB = ch / cw;
            const mainB = mainH / mainW;

            const scaleW = (cw / mainW).toFixed(3);
            const scaleH = (ch / mainH).toFixed(3);

            //容器的高宽比 大于 展示元素的高宽比时，按照宽度缩放
            if (cB > mainB) {
                screen.style.marginLeft = `-${(mainW * scaleW) / 2}px`;
                screen.style.marginTop = `-${(mainH * scaleW) / 2}px`;
                screen.style.transform = `scale(${scaleW})`;
            } else { //容器的高宽比 小于 展示元素的高宽比时，按照高度缩放
                screen.style.marginLeft = `-${(mainW * scaleH) / 2}px`;
                screen.style.marginTop = `-${(mainH * scaleH) / 2}px`;
                screen.style.transform = `scale(${scaleH})`;
            }
            screen.style.transformOrigin = `0px 0px`;
        }
    </script>
</body>

</html>

View Code