響應式頁面開發學習二

阿新 • • 發佈：2022-03-27

效果一

效果二

效果三

效果四

頁面程式碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        響應式頁面學習二
    </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .out {
            margin: 0 auto 
;
            width: 1100px;
            border: 1px solid red;
            /* overflow: hidden; */
            /*也可以保證父元素有高度*/
        }

        .out::after {
            /*保證父元素有高度*/
            content: '';
            display: block;
            clear: both;
        }

        .out .box {
            width 
: 260px;
            height: 300px;
            background: #ccc;
            float: left;
            margin-bottom: 20px;
            margin-right: 20px;
        }

        .out .box:nth-child(4n) {
            margin-right: 0;
        }

        /*移動優先原則*/
        @media(max-width:768px) {
            .out {
                width 
: 100%;
                background: yellow;
                box-sizing: border-box;
            }

            .out .box {
                width: 320px;
                float: none;
                margin-right: auto;
                margin-left: auto;
            }

            .out .box:nth-child(4n) {
                margin-right: auto;
            }
        }

        @media(min-width:768px) {
            .out {
                width: 680px;
            }

            .out .box {
                width: 320px;
                margin-right: 40px;

            }

            .out .box:nth-child(2n) {
                /*會繼承下去*/
                margin-right: 0;
            }
        }

        @media(min-width:992px) {
            .out {
                width: 960px;
            }

            .out .box {
                width: 290px;
                margin-right: 45px;

            }

            .out .box:nth-child(2n) {
                margin-right: 45px;
            }

            .out .box:nth-child(3n) {
                margin-right: 0;
            }
        }


        @media(min-width:1200px) {
            .out {
                width: 1100px;
            }

            .out .box {
                width: 260px;
                margin-right: 20px;
            }

            .out .box:nth-child(2n) {
                /*要考慮上面繼承的影響*/
                margin-right: 20px;
            }

            .out .box:nth-child(3n) {
                /*要考慮上面繼承的影響*/
                margin-right: 20px;
            }

            .out .box:nth-child(4n) {
                /*都是要計算的*/
                margin-right: 0;
            }
        }
    </style>
</head>

<body>
    <!--快速生成頁面元素方法 http://www.360doc.com/content/14/1028/19/21412_420673519.shtml -->
    <div class="out">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
        <div class="box">11</div>
        <div class="box">12</div>
        <div class="box">13</div>
        <div class="box">14</div>
        <div class="box">15</div>
    </div>
</body>

</html>