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

本文转载自 gaoquanquan 查看原文 2018/06/12 5 css/ 移动/ 移动端/ 适配/ 页面

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

<!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>

注意！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。

猜您在找

CSS3——PC以及移动端页面适配方法（流体布局）移动端页面适配方案移动端Web页面适配方案移动端Web页面适配方案前端移动端适配方法