CSS || 響應式網格

響應式網格系統

網格佈局的做用在於更有效控制元素在網頁中所佔比例的大小。

好比，博客的留言板塊：在屏幕較大時，佔據屏幕25%的寬度，出如今博客文章右側；在屏幕較小時，佔據屏幕100%寬度，出如今博客文章的下側

網格佈局是一種實現這種佈局需求的方法：將全部寬度分爲固定的欄（列）數，從而更高效控制元素寬度

1 基本的網格系統

基本的網格系統包括：容器container、行元素rows、列元素columns和間隙gutter

1.1 container

container的做用：設置整個網格的寬度。容器的寬度通常爲100%，能夠設置一個max-width

.grid-container {
    width: 100%;
    max-width: 1200px;    /* 可選 */
}

1.2 rows

rows的做用：保持列元素column不會溢出到其餘行。使用清除浮動的方式確保每一個行元素保持在行元素中

/* 確保row元素內的column元素不會溢出到其餘行 */
.row::after,
.row::before {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

1.3columns

column是網格系統中最複雜的部分，包括列元素定位方式，列元素寬度和響應式設計須要。

列元素定位

float、display:inline-block;、display:table;和display:flex;都可實現列元素定位。先使用float：最經常使用的而且容易出錯。

• 若是列元素是空的，浮動的列元素會堆在其餘元素的頂部。爲列元素設置最小高度1px能夠避免

[class*="col-"] {
    float: left;
    min-width: 1px;
}

列元素寬度

1. 列元素的寬度經過容器寬度/列數計算而來。容器寬度設置爲100%，須要分紅6列時，每列的寬度16.66%。

   [class*="col-"] {
       float: left;
       min-width: 1px;
       width: 16.66%;
   }

2. 若是要設置兩列元素的寬的一個section，須要建立一個2倍寬的列元素:經過組合，能夠建立出多種寬度

   • 只須要考慮使用列元素組合時，任何一行中列元素增長到6個時的狀況

     /* 組合多列的寬度 */
       .col-1 {
         width: 16.66%;
     }
     .col-2 {
         width: 33.33%;
     }
     .col-3 {
         width: 50%;
     }
     .col-4 {
         width: 66.664%;
     }
     .col-5 {
         width: 83.33%;
     }
     .col-6 {
         width: 100%;
     }

列間距Gutter

• 使用border-box爲設置百分比寬度的元素設置固定padding。使用border-box模型能夠很輕鬆建立列寬

.grid-container {
    width: 100%;
    max-width: 1200px;     
    box-sizing: border-box;   /* 須要在百分比寬度中使用固定的padding值 */
}

[class*="col-"] {
    float: left;
    min-width: 1px;
    width: 16.66%;
    /* 設置列間距 */
    padding: 12px;
}

1.4 總結

到此已經完成了一個基礎的網格佈局系統，能夠簡單使用。

<div class="grid-container outline">
    <div class="row">
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
        <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
        <div class="col-2"><p>col-2</p></div> 
    </div> 
    <div class="row">
        <div class="col-3"><p>col-3</p></div> 
        <div class="col-3"><p>col-3</p></div> 
    </div> 
</div>

<style>
* {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}

/* 定義網格容器，設置容器的寬度 */
.grid-container {
    width: 100%;
}
/* 確保row元素內的column元素不會溢出到其餘行 */
.row::after,
.row::before {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

/* 避免浮動元素堆疊 */
/* 設置每列元素寬度 */
[class*="col-"] {
    float: left;
    min-width: 1px;
    width: 16.66%;
    /* 設置列間距 */
    padding: 12px;

    background: #f66;
}

/* 組合多列的寬度 */
.col-1 {
    width: 16.66%;
}
   .col-2 {
    width: 33.33%;
}
.col-3 {
    width: 50%;
}
.col-4 {
    width: 66.664%;
}
.col-5 {
    width: 83.33%;
}
col-6 {
    width: 100%;
}

/* outline外輪廓設置，突出元素 */
.outline, .outline * {
    outline: 1px solid #f6a1a1;
}

/* 其餘樣式，便於觀察 */
 /*-- some extra column content styling --*/
[class*='col-'] > p {
     background-color: #FFC2C2; 
     padding: 0;
     margin: 0;
     text-align: center; 
     color: white; 
}
</style>

2 實現響應式

只須要調整列元素寬度，即可以調整網頁佈局適配移動端。

1. 屏幕寬度小於800px時，列寬變爲原來的2倍。

2. 問題：col-4、col-5和col-6的寬度會超過100%，須要將其顯示設置爲100%。

   • 而且col-1出如今col-5以後時：須要將其寬度設置爲100%

   • col-2出如今最後一個元素時：須要將其寬度設置爲100%

3. 使用媒體查詢來解決不一樣尺寸屏幕應用不一樣樣式

不處理col-1、col-2時

因此須要處理兩種特殊狀況:

• col-1出如今col-5後；.row .col-2:last-of-type{ width: 100%; }

• col-2出如今最後後；.row .col-5 ~ .col-1{ width: 100%; }

@media all and (max-width: 800px) {
    .col-1 {
    width: 33.33%;
    }
    .col-2 {
        width: 50%;
    }
    .col-3 {
        width: 83.33%;
    }
    .col-4 {
        width: 100%;
    }
    .col-5 {
        width: 100%;
    }
    .col-6 {
        width: 100%;
    }

    /* .row .col-2:last-of-type{
         width: 100%; 
    }
    .row .col-5 ~ .col-1{
        width: 100%; 
    } */
}

元素寬度顯著小於800px時，可讓除了col-1以外的元素都爲100%寬

@media all and (max-width:650px){
        .col-1{ width: 50%;}
        .col-2{ width: 100%;}
        .col-3{ width: 100%;}
        .col-4{ width: 100%;}
        .col-5{ width: 100%;}
        .col-6{ width: 100%;}
}