CSS || 響應式網格

warmcheng 發布于2019-08-29 12:16 / 489人閱讀

摘要：響應式網格系統網格布局的作用在于更有效控制元素在網頁中所占比例的大小。使用清除浮動的方式確保每個行元素保持在行元素中確保元素內的元素不會溢出到其他行是網格系統中最復雜的部分，包括列元素定位方式，列元素寬度和響應式設計需要。

響應式網格系統

網格布局的作用在于更有效控制元素在網頁中所占比例的大小。

比如，博客的留言板塊：在屏幕較大時，占據屏幕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;
}

列元素寬度

列元素的寬度通過容器寬度/列數計算而來。容器寬度設置為100%，需要分成6列時，每列的寬度16.66%。

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

如果要設置兩列元素的寬的一個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 總結

到此已經完成了一個基礎的網格布局系統，可以簡單使用。


    
        col-1
        col-1
        col-1
        col-1
        col-1
        col-1
    
    
        col-2 
        col-2 
        col-2 
     
    
        col-3 
        col-3

2 實現響應式

只需要調整列元素寬度，便可以調整網頁布局適配移動端。

屏幕寬度小于800px時，列寬變為原來的2倍。

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

并且col-1出現在col-5之后時：需要將其寬度設置為100%

col-2出現在最后一個元素時：需要將其寬度設置為100%

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

不處理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%;}
}

GPU云服務器云服務器響應式響應式布局響應式網站響應式設計

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111784.html

CSS基礎篇--快速使用CSS Grid布局，實現響應式設計

摘要：的個值表示三列，相應的數值表示列寬即都為。嘗試其它布局把移到右邊實現后的效果使用點來創建空白的網格單元格實現效果真正的響應式布局假設你想在移動設備上查看的是標題旁邊是菜單。常用Grid布局屬性介紹下面從一個簡單Grid布局例子說起。 CSS Grid 布局由兩個核心組成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是實際的 grid(網格)，items...

cjie 2019-08-30 14:18 評論0 收藏0
創建自己的 CSS 網格系統【轉載 | 譯】

摘要：為了防止這種情況，給提供的最小高度并使它們浮動。基本網格準備好了一些額外的列內容樣式使我們的網格系統響應調整我們的網格以實現移動布局非常簡單。注意本指南只是創建自己響應式網格系統的起點。此文翻譯自 Creating Your Own CSS Grid System | Jan，英文不好如有錯誤 ? ，請指正。 CSS 網格已經存在很長時間了。它們通常捆綁在 Bootstrap 等框架...

gecko23 2019-08-30 15:55 評論0 收藏0
CSS Grid布局，實現響應式設計

摘要：效果如圖響應式布局例子實現如圖效果結構布局使用屬性創建一個列的網格，每個列都是一個單位寬度總寬度的。嘗試其它布局把移到右邊實現后的效果使用點來創建空白的網格單元格實現效果真正的響應式布局假設你想在移動設備上查看的是標題旁邊是菜單。columns(列) 和 rows(行) 為了使其成為二維的網格容器，我們需要定義列和行。讓我們創建3列和2行。我們將使用grid-template-row和gri...

pakolagij 2019-04-23 11:44 評論0 收藏0
一行css代碼搞定響應式布局

摘要：最精彩的地方在于所有的響應特性被添加到了一行代碼中。基礎響應單位柵格布局帶來了一個全新的值單位，單位通常簡寫為，它允許你根據需要將容器拆分為多個塊。原文地址: https://medium.com/free-code-...原文作者: Per Harald Borgen 翻譯作者: hanxiansen showImg(https://segmentfault.com/img/re...

appetizerio 2019-08-30 11:12 評論0 收藏0