css--响应式网格布局

百度前端技术学院任务八：响应式网格（栅格化）布局

使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局，根据屏幕宽度，元素占的栏数不同。

示例代码

DOM结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>任务八：响应式网格（栅格化）布局</title>
        <link rel="stylesheet" type="text/css" href="css/task08.css"/>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-6 col">
                </div>
                <div class="col-md-4 col-sm-6 col">
                </div>
                <div class="col-md-4 col-sm-12 col">
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-3 col">
                </div>
                <div class="col-md-6 col-sm-6 col">
                </div>
                <div class="col-md-3 col-sm-3 col">
                </div>
            </div>
            <div class="row">
                <div class="col-md-1 col col-sm-2">
                </div>
                <div class="col-md-1 col col-sm-2">
                </div>
                <div class="col-md-2 col col-sm-8">
                </div>
                <div class="col-md-2 col col-sm-3">
                </div>
                <div class="col-md-6 col col-sm-3">
                </div>
            </div>
        </div>
    </body>
</html>

css示例代码

html,body{
    margin: 0;
    padding: 0;
}
.container{
    box-sizing: border-box;
    border: 1px solid #999999;
    padding: 10px;
}
.row:after, .row:before{
    content: "";
    display: table;
    clear: both;
}
.col{
    box-sizing: border-box;
    border: 1px solid #999999;
    background-color: #EEEEEE;
    height: 50px;
    margin: 10px;
    float: left;
}
@media only screen and (min- 769px) {
    .col-md-1{
        width: calc(8.333% - 20px);      
    }
    .col-md-2{
        width: calc(16.666% - 20px);
    }
    .col-md-3{
        width: calc(25% - 20px);
    }
    .col-md-4{
        width: calc(33.333% - 20px);
    }
    .col-md-6{
        width: calc(50% - 20px);
    }
}

@media only screen and (max- 768px) {
    .col-sm-2{
        width: calc( 16.666% - 20px);
    }
    .col-sm-3{
        width: calc( 25% - 20px);
    }
    .col-sm-6{
        width: calc( 50% - 20px);
    }
    .col-sm-8{
        width: calc( 66.666% - 20px);
    }
    .col-sm-12{
        width: calc( 100% - 20px);
    }
}

看别人的实现，get到新姿势：使用通配符

/* 包含col-的所有class*/
[class*="col-"] {
    float: left;
    min-height: 1px;
    margin: 10px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #999;
    box-sizing: border-box;
    background-color: #eee;
}
 
/* 以col-开头的class */
[class^="col"] {
}
 
/* 以col-结尾的class */
[class$="col-"] {
}