響應式柵欄佈局

時間 2019-12-08

標籤響應柵欄佈局简体版

原文原文鏈接

任務八 : 響應式網格(柵格化)佈局

目標:實現效果如圖

知識點

CSS3 屬性 box-sizing 的使用: 當元素的寬度、高度肯定時, { box-sizing : border-box }將元素的padding, border都將在設定的高度和寬度內繪製;也就是說,不管你的padding和border如何變化,它都不會超出預先設定好的寬度和高度.css
清楚浮動防止高度塌陷: 設外層元素爲container, 內層爲content,應用了float屬性的內層元素content高度一旦超過container,container就沒法徹底包裹content,就形成了高度塌陷.解決辦法:父級元素應用::after選擇器.

.container: after {
            content: " ";
            display: table;
            clear: both;
        }

CSS3屬性: @media主要用於爲不一樣設備提供不一樣的屬性, 參考文檔: CSS|MDN、
CSS3 media querise;
***

本次練習代碼示例:html

index.html文件:segmentfault

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./public/index.css">
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="content"></div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="content"></div>
        </div>
        <div class="col-md-4 col-sm-12">
            <div class="content"></div>
        </div>
        <div class="col-md-3 col-sm-3">
            <div class="content"></div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="content"></div>
        </div>
        <div class="col-md-3 col-sm-3">
            <div class="content"></div>
        </div>
        <div class="col-md-1 col-sm-2">
            <div class="content"></div>
        </div>
        <div class="col-md-1 col-sm-2">
            <div class="content"></div>
        </div>
        <div class="col-md-2 col-sm-8">
            <div class="content"></div>
        </div>
        <div class="col-md-2 col-sm-3">
            <div class="content"></div>
        </div>
        <div class="col-md-6 col-sm-3">
            <div class="content"></div>
        </div>
    </div>
</body>
</html>

master.css文件佈局

* {
    box-sizing: border-box;
}

[class*= 'col-'] {
    float: left;
    height: 70px;
    padding: 10px;
}

.content {
    border: 1px solid #999;
    background-color: #eee;
    height: 50px;
}

@media only screen and (min-width: 768.1px) {
    .col-md-1 {
        width: 8.333%;
    }
    .col-md-2 {
        width: 16.666%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.333%;
    }
    .col-md-5 {
        width: 41.666%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-8 {
        width: 66.666%;
    }
    .col-md-12 {
        width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .col-sm-1 {
        width: 8.333%;
    }
    .col-sm-2 {
        width: 16.666%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.333%;
    }
    .col-sm-5 {
        width: 41.666%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-8 {
        width: 66.666%;
    }
    .col-sm-12 {
        width: 100%;
    }
}

.row:after {
    display: table;
    content: " ";
    clear: both;
}

(若有錯漏歡迎指正);code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。