柵格化系統的原理以及實現

時間 2019-12-10

標籤柵格系統原理以及實現简体版

原文原文鏈接

更多技術文章

什麼是柵格化

在一個有限的、固定的平面上，用水平線和垂直線（虛擬的線，「參考線」），將平面劃分紅有規律的一系列「格子」（虛擬的格子），並依託這些格子、或以格子的邊線爲基準線，來進行有規律的版面佈局。css

通俗點來講，就是人爲的把網頁中的一行，等比例劃分,好比將一行劃分爲 12 等分。而後在每一個格子裏進行頁面開發，這就柵格化。
html

原理

假如在頁面裏定義了一個 DIV，並設置以下 CSS 屬性：git

div {
  border: 1px solid #ddd;
  height: 200px;
  width: 100%;
}

頁面上將會展現一個帶有灰色邊框的，寬度 100% 的矩形。若是手動控制瀏覽器放大縮小，此 DIV 也會相應的放大縮小，但寬度始終是 100%。

github

若是在頁面定義了兩個 DIV，並設置以下 CSS 屬性：bootstrap

body {
    font-size: 0; // 將inline-block佈局兩個DIV之間的距離清除
}
div {
    height: 200px;
    border: 1px solid #ddd;
    width: 50%;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top; // 頂部對齊
}

頁面上將會有兩個寬度各佔 50% 的 DIV，若是頁面放大或縮小，這兩個 DIV 都會始終保持着頁面 50% 的寬度。瀏覽器

相信到這裏，應該有人看出來了，這就是柵格化，只不過第一個例子是將一行劃分爲 1 等分，即只有一個格子。
第二個例子將一行劃分爲 2 等分，即有兩個格子。若是我將一行劃分爲 12 等分，那就跟 bootstrap 中的柵格化系統如出一轍了，有 12 個格子。app

實現

讓咱們來親自實現一個柵格化系統，假設咱們要將一行劃分爲 12 等分，那 1 等分就佔有 100% / 12 = 8.33% 的寬度。佈局

相應的 CSS 能夠這樣設置：網站

.col1  {width: 8.33%}
.col2  {width: 16.66%}
.col3  {width: 25%}
.col4  {width: 33.33%}
.col5  {width: 41.66%}
.col6  {width: 50%}
.col7  {width: 58.33%}
.col8  {width: 66.66%}
.col9  {width: 75%}
.col10 {width: 83.33%}
.col11 {width: 91.66%}
.col12 {width: 100%}

上一個完整的示例來看看吧：spa

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .app {
            font-size: 0;
        }
        .app div {
            box-sizing: border-box;
            border: 1px solid red;
            height: 200px;
            display: inline-block;
            vertical-align: top;
        }
        .col1  {width: 8.33%}
        .col2  {width: 16.66%}
        .col3  {width: 25%}
        .col4  {width: 33.33%}
        .col5  {width: 41.66%}
        .col6  {width: 50%}
        .col7  {width: 58.33%}
        .col8  {width: 66.66%}
        .col9  {width: 75%}
        .col10 {width: 83.33%}
        .col11 {width: 91.66%}
        .col12 {width: 100%}
    </style>
</head>
<body>
    <div class="app">
        <!-- 4個div 佔滿一行 -->
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
        <div class="col6"></div>
    </div>
</script>
</body>
</html>

最後呈現出來的效果是這樣的。

怎麼樣？是否是很簡單。

進階

結合 @media 媒體查詢，咱們能夠作得更多。@media 詳情請看MDN

相信用過 bootstrap 柵格化系統的都知道，在 bootstrap 柵格化系統中，有一些 col-md col-sm 屬性，它們是幹什麼用的呢？
其實，它們都是柵格化系統的 CSS 類名，只是針對了不一樣的屏幕寬度。

假如咱們有這樣的一個需求：
在 PC 上，由於屏幕比較大，咱們要求一行顯示 4 列的內容。可是在手機上，由於屏幕比較小，要求一行顯示 3 列的內容。
即一個網站同時適配 PC 和手機端，根據不一樣的端自動調整頁面。

此時，咱們能夠這樣作：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .app {
            font-size: 0;
        }
        .app div {
            box-sizing: border-box;
            border: 1px solid red;
            height: 200px;
            display: inline-block;
            vertical-align: top;
        }
        /* 針對屏幕分辨率大於等於1200的 */
        @media (min-width: 1200px) {
            .col-md1  {width: 8.33%}
            .col-md2  {width: 16.66%}
            .col-md3  {width: 25%}
            .col-md4  {width: 33.33%}
            .col-md5  {width: 41.66%}
            .col-md6  {width: 50%}
            .col-md7  {width: 58.33%}
            .col-md8  {width: 66.66%}
            .col-md9  {width: 75%}
            .col-md10 {width: 83.33%}
            .col-md11 {width: 91.66%}
            .col-md12 {width: 100%}
        }
        /* 針對屏幕分辨率小於1200的 */
        @media (max-width: 1199px) {
            .col-sm1  {width: 8.33%}
            .col-sm2  {width: 16.66%}
            .col-sm3  {width: 25%}
            .col-sm4  {width: 33.33%}
            .col-sm5  {width: 41.66%}
            .col-sm6  {width: 50%}
            .col-sm7  {width: 58.33%}
            .col-sm8  {width: 66.66%}
            .col-sm9  {width: 75%}
            .col-sm10 {width: 83.33%}
            .col-sm11 {width: 91.66%}
            .col-sm12 {width: 100%}
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="col-md3 col-sm4"></div>
        <div class="col-md3 col-sm4"></div>
        <div class="col-md3 col-sm4"></div>
        <div class="col-md3 col-sm4"></div>
    </div>
</script>
</body>
</html>

一個 DIV，同時設置兩個類名。當屏幕 >=1200px 時，一行顯示 4 列，當屏幕 <1200px 時，一行顯示3列，並且是瀏覽器自動調整。

一個柵格化系統就這樣實現了。