zoukankan html css js c++ java

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-700px){

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

        }

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

        @media (max-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>

查看全文

相关阅读:
leetcode-409
leetcode-836
leetcode-1160
leetcode-面试题13
leetcode-695
go的一些小lib
leetcode-300
cookie
php上传文件
 PHP 文件创建/写入

原文地址：https://www.cnblogs.com/gaoquanquan/p/9174088.html