CSS3——PC以及移动端页面适配方法（响应布局）

响应布局就是不同宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而使页面适应不同宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <style type="text/css">
        body,ul{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style:none;
        }

        .con{
            border:1px solid #000;
            overflow:hidden;
        }

        .con li{
            width:23%;
            height:200px;
            background-color: hotpink;
            float:left;
            margin:30px 1%;
        }
        
        /*当宽度小于700时下面的样式覆盖上面的样式*/
        @media (max-width:700px){

            .con li{
                width:46%;
                margin:30px 2%;
            }

        }

        /*当宽度小于500时下面的样式覆盖上面的样式*/

        @media (max-width:500px){

            .con li{
                width:90%;
                margin:30px 5%;
            }
        }
    </style>
</head>
<body>
<ul class="con">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>
posted @ 2018-06-12 17:13  高圈圈  阅读(874)  评论(0)  编辑  收藏  举报