如何实现网页的布局自适应

一、实现适配（@media + rem）

效果图：

二、使用步骤

1.body中代码：

代码如下（示例）：

<ul>
    <li>
        <div></div>
        <span>
            我是个头像
        </span>
    </li>
    <li>
        <div></div>
        <span>
            我是个头像
        </span>
    </li>
    <li>
        <div></div>
        <span>
            我是个头像
        </span>
    </li>
    <li>
        <div></div>
        <span>
            我是个头像
        </span>
    </li>
    <li>
        <div></div>
        <span>
            我是个头像
        </span>
    </li>
    <li>
        <div></div>
        <span>
            我是个头像
        </span>
    </li> 
</ul>

2.style中代码：

代码如下（示例）：

@media screen and (min-width: 768px){
            ul{
                background-color: blue !important;
            }
            li{
                width: 50% !important;
            }
            div{
                width: 5rem !important;
                height: 5rem !important;
            }
            span{
                font-size: 2.4rem !important;
            }
        }
        @media screen and (min-width: 992px){
            ul{
                background-color: orange !important;
            }
            li{
                width: 33.3333% !important;
            }
            div{
                width: 5rem !important;
                height: 5rem !important;
            }
            span{
                font-size: 2.4rem !important;
            }
        }
        @media screen and (min-width: 1200px){
            ul{
                background-color: orange !important;
            }
            li{
                width: 16% !important;
            }
            div{
                width: 3rem !important;
                height: 3rem !important;
            }
            span{
                font-size: 1.6rem !important;
            }
        }
        html{
            font-size: 10px;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            background-color: orangered;
            display: flow-root;
        }
        li{
            float: left;
            width: 100%;
            padding: 2rem 0;
        }
        div{
            border-radius: 50%;
            background-color: white;
            width: 8rem;
            height: 8rem;margin: auto;
        }
        span{
            display: block;
            text-align: center;
            line-height: 1.4em;
            font-size: 3rem;
        }




# 总结：利用@media screen实现网页布局的自适应，定义四种不同大小页面的尺寸，最小尺寸直接用无序列表，中间两种宽度利用在盒子内的宽度百分比自适应换行，最大尺寸用左浮动，使其能够排列于一行。