rem弹性布局-Web响应式布局入门到实战

当前位置:　首页>> 技术小册>> Web响应式布局入门到实战

**布局特点：**
为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度做等比例换算。

一句话描述：
一套方案，使用不同尺寸、分辨率的视口，都能呈现出较好的效果。

**设计思路：**
使用%或rem作为单位实现，本节将使用rem来实现。

代码示例：

```
<!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>rem布局</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="div0">
        <div id="top">
            <img id="logo" src="images/logo.png" alt="">
        </div>

<div id="main">
            <ul>
                <li>
                    <div><img src="images/ke.png" class="ke" alt=""></div>
                    <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
                    <div><img src="images/cart.png" class="cart" alt=""></div>
                </li>
                <li>
                    <div><img src="images/ke.png" class="ke" alt=""></div>
                    <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
                    <div><img src="images/cart.png" class="cart" alt=""></div>
                </li>
                <li>
                    <div><img src="images/ke.png" class="ke" alt=""></div>
                    <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
                    <div><img src="images/cart.png" class="cart" alt=""></div>
                </li>
                <li>
                    <div><img src="images/ke.png" class="ke" alt=""></div>
                    <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
                    <div><img src="images/cart.png" class="cart" alt=""></div>
                </li>
                <li>
                    <div><img src="images/ke.png" class="ke" alt=""></div>
                    <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
                    <div><img src="images/cart.png" class="cart" alt=""></div>
                </li>
                <li>
                    <div><img src="images/ke.png" class="ke" alt=""></div>
                    <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
                    <div><img src="images/cart.png" class="cart" alt=""></div>
                </li>
                <li>
                    <div><img src="images/ke.png" class="ke" alt=""></div>
                    <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
                    <div><img src="images/cart.png" class="cart" alt=""></div>
                </li>
                <li>
                    <div><img src="images/ke.png" class="ke" alt=""></div>
                    <div>码小课，在线技术知识分享平台:www.maxiaoke.com</div>
                    <div><img src="images/cart.png" class="cart" alt=""></div>
                </li>
            </ul>
        </div>
        <div id="bottom">
            <div>
                <img src="images/homepage.png" alt="">
            </div>
            <div>
                <img src="images/cart.png" alt="">
            </div>
        </div>
    </div>
    
</body>
<script>

/**
     * 动态设置根字体大小
    */
    var c=()=>{
        let w=document.documentElement.clientWidth; /* 获取设备的宽度 */
        //设置一个默认值，以320的宽度(iphone)来计算20号字体
        let defaultWidth = 20*(w/320)
        //设置字号
        let n= defaultWidth > 40 ? 40 + 'px' : defaultWidth + '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: 9999;
    background-color: #f5f5f5;
}

#logo{
    width: 4rem;
    height:1.5rem;
    vertical-align: -webkit-baseline-middle; /* 垂直居中 */
}

#main{
    height:auto;
    position: absolute;
    top:2rem; /* 根据header的高度设置 */
    bottom: 2rem; /* 根据bottom的高度设置 */
    background-color: #f5f5f5;
}

#main ul{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size:0.5rem;
}

#main ul li{
    display: flex;
    flex:1 1 3rem;
    border-bottom: 1px solid #dcdcdc;
    align-items: center;
}

#main ul li div{
    margin-left: 0.2rem;
    margin-right: 0.5rem;
}

.ke{
    width: 3.6rem;
    height:2rem;
    vertical-align: -webkit-baseline-middle;
}

.cart{
    width: 1rem;
    height: 1rem;
    vertical-align: -webkit-baseline-middle;
}

#bottom{
    position: fixed; /* 固定位置 */
    bottom:0;
    left:0;
    right:0;
    height:2rem;
    z-index: 9999;
    background-color: #f5f5f5;
    display: flex;
}

#bottom div{
    flex: 1 1 auto;
    text-align: center;
}

/*设置bottom里的图片*/
#bottom div img{
    width:1.5rem;
    height:1.5rem;
    vertical-align: -webkit-baseline-middle;
}
```

实现的效果：

![](/uploads/images/20230421/7dab477d7c8d2e2ae4e3fdda847fda21.png)

该分类下的相关小册推荐：

uniapp快速入门与实战

WebGL开发指南

web前端面试完全指南

vue高级应用开发与构建