亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS || 響應(yīng)式網(wǎng)格

warmcheng / 553人閱讀

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

響應(yīng)式網(wǎng)格系統(tǒng) 
網(wǎng)格布局的作用在于更有效控制元素在網(wǎng)頁中所占比例的大小。


比如，博客的留言板塊：在屏幕較大時，占據(jù)屏幕25%的寬度，出現(xiàn)在博客文章右側(cè)；在屏幕較小時，占據(jù)屏幕100%寬度，出現(xiàn)在博客文章的下側(cè)


網(wǎng)格布局是一種實現(xiàn)這種布局需求的方法：將所有寬度分為固定的欄（列）數(shù)，從而更高效控制元素寬度
1 基本的網(wǎng)格系統(tǒng) 
基本的網(wǎng)格系統(tǒng)包括：容器container、行元素rows、列元素columns和間隙gutter

1.1 container 
container的作用：設(shè)置整個網(wǎng)格的寬度。容器的寬度一般為100%，可以設(shè)置一個max-width
.grid-container {
    width: 100%;
    max-width: 1200px;    /* 可選 */
}

1.2 rows 
rows的作用：保持列元素column不會溢出到其他行。使用清除浮動的方式確保每個行元素保持在行元素中
/* 確保row元素內(nèi)的column元素不會溢出到其他行 */
.row::after,
.row::before {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}
1.3columns 
column是網(wǎng)格系統(tǒng)中最復(fù)雜的部分，包括列元素定位方式，列元素寬度和響應(yīng)式設(shè)計需要。
列元素定位

float、display:inline-block;、display:table;和display:flex;均可實現(xiàn)列元素定位。先使用float：最常用的并且容易出錯。

如果列元素是空的，浮動的列元素會堆在其他元素的頂部。為列元素設(shè)置最小高度1px可以避免

[class*="col-"] {
    float: left;
    min-width: 1px;
}
列元素寬度

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

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

如果要設(shè)置兩列元素的寬的一個section，需要創(chuàng)建一個2倍寬的列元素:通過組合，可以創(chuàng)建出多種寬度

只需要考慮使用列元素組合時，任何一行中列元素增加到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為設(shè)置百分比寬度的元素設(shè)置固定padding。使用border-box模型可以很輕松創(chuàng)建列寬

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

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

1.4 總結(jié) 
到此已經(jīng)完成了一個基礎(chǔ)的網(wǎng)格布局系統(tǒng)，可以簡單使用。


    

        
col-1

        
col-1

        
col-1

        
col-1

        
col-1

        
col-1

    

    

        
col-2
 
        
col-2
 
        
col-2
 
    
 
    

        
col-3
 
        
col-3
2 實現(xiàn)響應(yīng)式 
只需要調(diào)整列元素寬度，便可以調(diào)整網(wǎng)頁布局適配移動端。

屏幕寬度小于800px時，列寬變?yōu)樵瓉淼?倍。

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

并且col-1出現(xiàn)在col-5之后時：需要將其寬度設(shè)置為100%

col-2出現(xiàn)在最后一個元素時：需要將其寬度設(shè)置為100%

使用媒體查詢來解決不同尺寸屏幕應(yīng)用不同樣式

不處理col-1、col-2時

所以需要處理兩種特殊情況:

col-1出現(xiàn)在col-5后；.row .col-2:last-of-type{ width: 100%; }

col-2出現(xiàn)在最后后；.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%;}
}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/111784.html

相關(guān)文章

  • CSS基礎(chǔ)篇--快速使用CSS Grid布局，實現(xiàn)響應(yīng)式設(shè)計

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

    cjie 評論0 收藏0

  • 創(chuàng)建自己的 CSS 網(wǎng)格系統(tǒng)【轉(zhuǎn)載 | 譯】

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

    gecko23 評論0 收藏0

  • CSS Grid布局，實現(xiàn)響應(yīng)式設(shè)計

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

    pakolagij 評論0 收藏0

  • 一行css代碼搞定響應(yīng)式布局

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

    appetizerio 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<