Flex布局练习（四）- rem弹性布局_弹性布局练习-CSDN博客

本文链接：https://blog.csdn.net/JHY97/article/details/122748060

一、rem弹性布局

1.1 布局特点

为了保证在各种屏幕上不失真，就要根据实际屏幕宽度做等比例换算

1.2 代码案例

.index.html

<!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>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="div0">
        <div class="top">
            <img id="logo" src="img/logo2.png" alt="展示案例logo">
        </div>
        <div class="main">
            <ul>
                <li>
                    <div><img src="img/exmple.jpg" alt="展示案例图" class="exmple"></div>
                    <div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算</div>
                    <div><img src="img/shop.png" alt="" class="shopcar"></div>
                </li>
                <li>
                    <div><img src="img/exmple.jpg" alt="展示案例图" class="exmple"></div>
                    <div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算</div>
                    <div><img src="img/shop.png" alt="" class="shopcar"></div>
                </li>
                <li>
                    <div><img src="img/exmple.jpg" alt="展示案例图" class="exmple"></div>
                    <div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算</div>
                    <div><img src="img/shop.png" alt="" class="shopcar"></div>
                </li>
                <li>
                    <div><img src="img/exmple.jpg" alt="展示案例图" class="exmple"></div>
                    <div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算</div>
                    <div><img src="img/shop.png" alt="" class="shopcar"></div>
                </li>
                <li>
                    <div><img src="img/exmple.jpg" alt="展示案例图" class="exmple"></div>
                    <div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算</div>
                    <div><img src="img/shop.png" alt="" class="shopcar"></div>
                </li>
                <li>
                    <div><img src="img/exmple.jpg" alt="展示案例图" class="exmple"></div>
                    <div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算</div>
                    <div><img src="img/shop.png" alt="" class="shopcar"></div>
                </li>
                <li>
                    <div><img src="img/exmple.jpg" alt="展示案例图" class="exmple"></div>
                    <div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算</div>
                    <div><img src="img/shop.png" alt="" class="shopcar"></div>
                </li>
            </ul>
        </div>
        <div class="bottom">
            <div><img src="img/home.png" alt=""></div>
            <div><img src="img/shop.png" alt=""></div>
        </div>
    </div>
</body>
<script>
    var c=()=>{
        // 获取设备的宽度
        let w = document.documentElement.clientWidth;
        // 以20px为依据，除以320宽度，如果大于40则按40px大小，如果小于40就按所得数为字体大小
        let n = (20*(w/320)>40?40 + "px" : (20*(w/320) + "px"));
        document.documentElement.style.fontSize=n;
    }
    window.addEventListener("load",c);
    window.addEventListener("resize",c);
</script>
</html>

main.css

*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 10px;
}
.top,.main,.bottom{
    width: 100%;
}
.top{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2rem;
    z-index: 1000;
    background-color: #f5f5f5;
}
#logo{
    width: 4rem;
    height: 1rem;
    /* 垂直居中 */
    vertical-align: -webkit-baseline-middle;
}
.main{
    height: auto;
    position: absolute;
    top: 2rem;
    border: 2rem;
    background-color: #f5f5f5;
}
.main ul{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.5rem;
}
.exmple{
    width: 3.6rem;
    height: 2rem;
    vertical-align: -webkit-baseline-middle;
}
.shopcar{
    width: 1rem;
    height: 1rem;
    vertical-align: -webkit-baseline-middle;
}
.main ul li{
    flex: 1 1 3rem;
    display: flex;
    border-bottom: 1px solid dimgrey;
    align-items: center;
}
.main ul li div{
    margin-left: 0.2rem;
    margin-right: 0.5rem;
}
.bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2rem;
    z-index: 1000;
    background-color: #f5f5f5;
    display: flex;
}
.bottom div{
    flex: 1 1 auto;
    text-align: center;
}
.bottom div img{
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: -webkit-baseline-middle;
}

页面内字体和图片大小会随着页面宽度变化而改变

页面效果展示 - 页面宽度为300px