1. 程式人生 > 實用技巧 >css--響應式網格佈局

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-width: 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-width: 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-"] {
}