手写一个简易的flexiable响应式布局

时间：2025-04-07 16:54:13

手写一个简易的flexiable响应式布局

要实现页面内容随页面大小变化而变化，就要将单位px随着页面大小变化而变化，这里采用rem作为单位来实现。
首先要弄清楚rem与px之前的单位关系：1rem = 根元素字体大小 / 10
这里的10表示将页面纵向平均分为10份，当然也可以平均分为你想要的份数
根元素字体大小可以设置在body中font-size，

<body style="font-size:10px">
</body>

搞清楚单位转换关系后，我们要实现响应式，那么就不能将font-size写死，而是通过JavaScript动态调整font-size的值，我们可以获取当前页面的宽度，宽度的变化来动态调整font-size，

var width = document.body.clientWidth;          // 获取窗口大小（不包括滚动条宽度）
var doc = document.documentElement.style.fontSize = width / 10 + 'px';   // 设置根元素字体大小

然后我们再对页面大小变化做实时监测，即可实现响应式了，

<!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>
        body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 10rem;              /* 根元素字体大小 = 1rem */
            height: 10rem;
            background-color: aqua;
            font-size: .1042rem;
        }
        img{
            width: 6.3542rem;
            height: 2.0625rem;
        }
    </style>
</head>
<body>
    <div class="box">测试</div>
    <img src="img/" alt="">

    <script>
        window.onresize = function(){                                                 // 改变窗口大小回调函数
            let width = document.body.clientWidth;                                    // 获取窗口大小（不包括滚动条宽度）
            var doc = document.documentElement.style.fontSize = width / 10 + 'px';    // 设置根元素字体大小
            console.log('@@@', document.documentElement.style.fontSize);
        }
    </script>
</body>
</html>

相关文章